Chartjs-Chartjs, no cross lines but horizontal line on the same level untill a next point

by

0👍

Depending your dataset Checkout this example

Basically you just have to set the property stepped on the dataset object of a line chart.

Here a short demo, showing the effect of this single property:

let data = [10, 20, 70, 30, 90]
new Chart(document.getElementById("chart"), {
    type: 'line',
    data: {
      labels: data,
      datasets: [{
        label: 'Dataset',
        data: data,
        fill: false,
      },{
        label: 'Dataset(stepped) - offset by -100',
        data: data.map(v => v-100),
        fill: false,
        stepped: true,
      }]
    },
    options:{
      maintainAspectRatio: false,
    }
});
<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