Chartjs-Line charts is higher that the dataset in Chart.JS

by

1👍

✅

If I understand well, you don’t want stacking all the data in the same group, but the ‘stack’ parameter is the same for each data set. In the docs the ‘stack’ parameter identify a Group ID for combining multiple data. I suggest you split the data in different groups.

// Create a canvas into the loaded .php page
  var canvas = document.createElement('canvas');
  div = document.getElementById('container');
  canvas.id = "myChart";
  canvas.style.zIndex = 8;
  div.appendChild(canvas);
  const labels = [
      '8',
      '9',
      '11',
      '14',
      '17',
      '21',
      '8',
      '9',
      '11',
      '14',
      '17',
      '21',
  ];

  const data = {
      labels: labels,
      datasets: [{
              label: 'My Fourth dataset',
              backgroundColor: 'rgb(255,0,0)',
              borderColor: 'rgb(255,0,0)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Fifth dataset',
              backgroundColor: 'rgb(255,255,0)',
              borderColor: 'rgb(255,255,0)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Sixth dataset',
              backgroundColor: 'rgb(255,159,64)',
              borderColor: 'rgb(255,159,64)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My Seventh dataset',
              backgroundColor: 'rgb(224,224,224)',
              borderColor: 'rgb(224,224,224)',
              data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined',
              type: 'bar'
          },
          {
              label: 'My First dataset',
              backgroundColor: 'rgb(30,144,255)',
              borderColor: 'rgb(30,144,255)',
              data: [1, 10, 5, 2, 20, 30, 145, 1, 10, 5, 2, 20, 30, 45],
              stack: 'combined_first',
          },
          {
              label: 'My Secound dataset',
              backgroundColor: 'rgb(165,42,42)',
              borderColor: 'rgb(165,42,42)',
              data: [1, 10, 5, 2, 20, 30, 145, 1, 10, 5, 2, 20, 30, 45],
              stack: 'combined_second',
          },
          {
              label: 'My Third dataset',
              backgroundColor: 'rgb(80,80,80)',
              borderColor: 'rgb(80,80,80)',
              data: [3, 2, 5, 2, 2, 5, 5, 3, 2, 5, 2, 2, 5, 8],
              stack: 'combined_third',
          }
      ]
  };

  const config = {
      type: 'line',
      data: data,
      options: {
          plugins: {
              title: {
                  display: true,
                  text: 'Chart'
              }
          },
          scales: {
              y: {
                  stacked: true
              }
          }
      },
  };
  const myChart = new Chart(
      document.getElementById('myChart'),
      config
  );
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>

Leave a comment