How to plot a single value with line in line chart graph using charts.js?

by

0👍

✅

You can define an animation.onComplete function as follows to draw the line in case a single data value is present.

animation: {
  onComplete: e => {
    var ctx = chart.chart.ctx;
    var data =  chart.config.data.datasets[0].data;
    if (data[0] == null) {
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0']; 
      var y = yAxis.getPixelForValue(data[1]);         
      ctx.save();           
      ctx.globalCompositeOperation='destination-over';
      ctx.strokeStyle = 'blue'          
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(xAxis.left, y);             
      ctx.lineTo(xAxis.right, y);
      ctx.stroke();
      ctx.restore();       
    }    
  }
},

This function expects the data array to be of format [null, <value>, null] in case a single value is present, otherwise it will be hard to horizontally center the data point (see this answer). It’s up to you to change the generateRandomDataSet() function in a way that it provides such data.

Please have a look at your changed code below.

const chart = new Chart('line-chart', {
  type: "line",
  data: {
    labels: ['', 'A', ''],
    datasets: [{
      data: [null, 120, null],
      fill: false,
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: 4,
    }],
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    animation: {
      onComplete: e => {
        var ctx = chart.chart.ctx;
        var data =  chart.config.data.datasets[0].data;
        if (data[0] == null) {
          var xAxis = chart.scales['x-axis-0'];
          var yAxis = chart.scales['y-axis-0']; 
          var y = yAxis.getPixelForValue(data[1]);         
          ctx.save();           
          ctx.globalCompositeOperation='destination-over';
          ctx.strokeStyle = 'blue'          
          ctx.lineWidth = 2;
          ctx.beginPath();
          ctx.moveTo(xAxis.left, y);             
          ctx.lineTo(xAxis.right, y);
          ctx.stroke();
          ctx.restore();       
        }    
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          padding: 20,
          min: 0,
          stepSize: 100
        },
        gridLines: {
          drawBorder: false
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          zeroLineColor: "transparent",
          drawBorder: false,
          display: false
        }
      }]      
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>

Leave a comment