Line Chart Stacked

Line Chart Stacked - 图1

Stacked: trueStacked: false (default)Stacked SingleRandomizeAdd DatasetAdd DataRemove DatasetRemove Data

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. responsive: true,
  6. plugins: {
  7. title: {
  8. display: true,
  9. text: (ctx) => 'Chart.js Line Chart - stacked=' + ctx.chart.options.scales.y.stacked
  10. },
  11. tooltip: {
  12. mode: 'index'
  13. },
  14. },
  15. interaction: {
  16. mode: 'nearest',
  17. axis: 'x',
  18. intersect: false
  19. },
  20. scales: {
  21. x: {
  22. title: {
  23. display: true,
  24. text: 'Month'
  25. }
  26. },
  27. y: {
  28. stacked: true,
  29. title: {
  30. display: true,
  31. text: 'Value'
  32. }
  33. }
  34. }
  35. }
  36. };
  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: 'My First dataset',
  9. data: Utils.numbers(NUMBER_CFG),
  10. borderColor: Utils.CHART_COLORS.red,
  11. backgroundColor: Utils.CHART_COLORS.red,
  12. fill: true
  13. },
  14. {
  15. label: 'My Second dataset',
  16. data: Utils.numbers(NUMBER_CFG),
  17. borderColor: Utils.CHART_COLORS.blue,
  18. backgroundColor: Utils.CHART_COLORS.blue,
  19. fill: true
  20. },
  21. {
  22. label: 'My Third dataset',
  23. data: Utils.numbers(NUMBER_CFG),
  24. borderColor: Utils.CHART_COLORS.green,
  25. backgroundColor: Utils.CHART_COLORS.green,
  26. fill: true
  27. },
  28. {
  29. label: 'My Fourth dataset',
  30. data: Utils.numbers(NUMBER_CFG),
  31. borderColor: Utils.CHART_COLORS.yellow,
  32. backgroundColor: Utils.CHART_COLORS.yellow,
  33. fill: true
  34. }
  35. ]
  36. };
  1. const actions = [
  2. {
  3. name: 'Stacked: true',
  4. handler: (chart) => {
  5. chart.options.scales.y.stacked = true;
  6. chart.update();
  7. }
  8. },
  9. {
  10. name: 'Stacked: false (default)',
  11. handler: (chart) => {
  12. chart.options.scales.y.stacked = false;
  13. chart.update();
  14. }
  15. },
  16. {
  17. name: 'Stacked Single',
  18. handler: (chart) => {
  19. chart.options.scales.y.stacked = 'single';
  20. chart.update();
  21. }
  22. },
  23. {
  24. name: 'Randomize',
  25. handler(chart) {
  26. chart.data.datasets.forEach(dataset => {
  27. dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
  28. });
  29. chart.update();
  30. }
  31. },
  32. {
  33. name: 'Add Dataset',
  34. handler(chart) {
  35. const data = chart.data;
  36. const dsColor = Utils.namedColor(chart.data.datasets.length);
  37. const newDataset = {
  38. label: 'Dataset ' + (data.datasets.length + 1),
  39. backgroundColor: dsColor,
  40. borderColor: dsColor,
  41. fill: true,
  42. data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
  43. };
  44. chart.data.datasets.push(newDataset);
  45. chart.update();
  46. }
  47. },
  48. {
  49. name: 'Add Data',
  50. handler(chart) {
  51. const data = chart.data;
  52. if (data.datasets.length > 0) {
  53. data.labels = Utils.months({count: data.labels.length + 1});
  54. for (let index = 0; index < data.datasets.length; ++index) {
  55. data.datasets[index].data.push(Utils.rand(-100, 100));
  56. }
  57. chart.update();
  58. }
  59. }
  60. },
  61. {
  62. name: 'Remove Dataset',
  63. handler(chart) {
  64. chart.data.datasets.pop();
  65. chart.update();
  66. }
  67. },
  68. {
  69. name: 'Remove Data',
  70. handler(chart) {
  71. chart.data.labels.splice(-1, 1); // remove the label first
  72. chart.data.datasets.forEach(dataset => {
  73. dataset.data.pop();
  74. });
  75. chart.update();
  76. }
  77. }
  78. ];

Docs