Multi Axis Line Chart

Multi Axis Line Chart - 图1

Randomize

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. responsive: true,
  6. interaction: {
  7. mode: 'index',
  8. intersect: false,
  9. },
  10. stacked: false,
  11. plugins: {
  12. title: {
  13. display: true,
  14. text: 'Chart.js Line Chart - Multi Axis'
  15. }
  16. },
  17. scales: {
  18. y: {
  19. type: 'linear',
  20. display: true,
  21. position: 'left',
  22. },
  23. y1: {
  24. type: 'linear',
  25. display: true,
  26. position: 'right',
  27. // grid line settings
  28. grid: {
  29. drawOnChartArea: false, // only want the grid lines for one axis to show up
  30. },
  31. },
  32. }
  33. },
  34. };
  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. borderColor: Utils.CHART_COLORS.red,
  11. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12. yAxisID: 'y',
  13. },
  14. {
  15. label: 'Dataset 2',
  16. data: Utils.numbers(NUMBER_CFG),
  17. borderColor: Utils.CHART_COLORS.blue,
  18. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  19. yAxisID: 'y1',
  20. }
  21. ]
  22. };
  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