Chartjs-Is it posssible to create a Line-Chart with only 2 values? – Chart.js

by

1👍

✅

You can leave gaps in your data using null. To display your two values as first and last value you just need to fill all the values in between with null. Then you can use the option spanGaps:true to connect the first and last point.

const options = {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'red',
      borderColor: 'red',
      data: [1, null, null, null, null, null, 7],
      fill: false,
    }]
  },
  options: {
    spanGaps: true,
  }
}

const ctx = document.getElementById('chart').getContext('2d');
try {
  new Chart(ctx, options);
} catch (e) {
  // There's a cross origin error happening in the snippet
  //console.log (e)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<canvas id="chart" width="600" height="400"></canvas>

Leave a comment