[Chartjs]-Chart.Js vers2 multiline to version 3

by

1👍

✅

This is because you provide the labels and data as strings while it should be an array with strings for the labels, same goes for the data field:

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
<script>
  const ctx = document.getElementById("canvas").getContext("2d");
  ctx.canvas.height = 200;

  const labels = ['11/1/2021', '11/2/2021', '11/3/2021', '11/4/2021', '11/5/2021', '11/6/2021', '11/7/2021', '11/8/2021', '11/9/2021', '11/10/2021'];
  const data = {
    labels: labels,
    datasets: [{
        label: 'South',
        data: ['6', '4', '2', '4', '3', '1', '0', '9', '3', '0'],
        borderColor: '#0d47a1',
        backgroundColor: '#2196f3',
        yAxisID: 'y',
      },
      {
        label: 'North',
        data: ['72', '97', '88', '143', '102', '0', '0', '153', '100', '0'],
        borderColor: '#e65100',
        backgroundColor: '#ff9800',
        yAxisID: 'y1',
      }
    ]
  };

  const config = {
    type: 'line',
    data: data,
    options: {
      responsive: true,
      interaction: {
        mode: 'index',
        intersect: false,
      },
      stacked: false,
      plugins: {
        title: {
          display: true,
          text: 'Test'
        }
      },
      scales: {
        y: {
          type: 'linear',
          display: true,
          position: 'left',
        },
        y1: {
          type: 'linear',
          display: true,
          position: 'right',

          // grid line settings
          grid: {
            drawOnChartArea: false, // only want the grid lines for one axis to show up
          },
        },

        x: {
          ticks: {
            maxRotation: 65,
            minRotation: 65,
            fontSize: 11
          }
        }

      }
    },
  };

  new Chart(ctx, config);
</script>

Leave a comment