[Chartjs]-Why graphic points dont join together when there is another existing graphic line?

by

1👍

✅

The problem is probably (since I don’t know how your data looks like), that you have missing values in the chart dataset of the green line chart. You could fix this with simply setting the x and y position of the dataset.

You could achieve this simply with the map and filter function. Details how this can be done, you can see in the demo below.

Demo showcase:
(the solution is the ** dark green** line, that is offset by -10)

let dataForGreenLine = [10,  undefined, undefined, 40,  undefined, 30]

let dataset = {
  label: '"Red" - line',
  data:[65, 59, 48, 2, 56, 10 ],
  borderColor: '#ff0000',
  backgroundColor: '#ff0000',
};

let dataset2 = {
  label: '"Green" - line',
  data: dataForGreenLine,
  borderColor: '#00ff00',
  backgroundColor: '#00ff00',
}

let dataset3 = {
  label: 'Solution: "Green" - line (offset -10)',
  
  // cleaning up the data, removing the empty values
  data: dataForGreenLine
            // create the points ( for the demo I'm offsetting "y" by -10)
            // .map((v, i) => ({ x: i, y: v })) 
            .map((v, i) => ({ x: i, y: v? v - 10 : v })) 
            // filtering Points out, that are not valid
            .filter( i => i.y != undefined),
  borderColor: '#009605',
  backgroundColor: '#009605',
}

let config = {
    type: 'line',
    data: {
      labels: dataset.data.map((v,i) => i),
      datasets: [dataset, dataset2, dataset3 ]
    },
    options:{
      maintainAspectRatio: false,
      plugins: {
        legend: { display: true }
      }
    }
 };
  
 new Chart(document.getElementById("chart"), config);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>    

<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

Leave a comment