Stacked Bar Chart with Groups

Using the stack property to divide datasets into multiple stacks.

Stacked Bar Chart with Groups - 图1

Randomize

config setup actions

  1. const config = {
  2. type: 'bar',
  3. data: data,
  4. options: {
  5. plugins: {
  6. title: {
  7. display: true,
  8. text: 'Chart.js Bar Chart - Stacked'
  9. },
  10. },
  11. responsive: true,
  12. interaction: {
  13. intersect: false,
  14. },
  15. scales: {
  16. x: {
  17. stacked: true,
  18. },
  19. y: {
  20. stacked: true
  21. }
  22. }
  23. }
  24. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
  3. const labels = Utils.months({count: 7});
  4. const data = {
  5. labels: labels,
  6. datasets: [
  7. {
  8. label: 'Dataset 1',
  9. data: Utils.numbers(NUMBER_CFG),
  10. backgroundColor: Utils.CHART_COLORS.red,
  11. stack: 'Stack 0',
  12. },
  13. {
  14. label: 'Dataset 2',
  15. data: Utils.numbers(NUMBER_CFG),
  16. backgroundColor: Utils.CHART_COLORS.blue,
  17. stack: 'Stack 0',
  18. },
  19. {
  20. label: 'Dataset 3',
  21. data: Utils.numbers(NUMBER_CFG),
  22. backgroundColor: Utils.CHART_COLORS.green,
  23. stack: 'Stack 1',
  24. },
  25. ]
  26. };
  1. const actions = [
  2. {
  3. name: 'Randomize',
  4. handler(chart) {
  5. chart.data.datasets.forEach(dataset => {
  6. dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
  7. });
  8. chart.update();
  9. }
  10. },
  11. ];

Docs