[Chartjs]-How can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?

by

2👍

✅

This can be done with the Plugin Core API. The API offers different hooks that may be used for executing custom code. In your case, you can use the afterDraw hook to draw the desired lines directly on the canvas using CanvasRenderingContext2D.

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    var xAxis = chart.scales['x-axis-0'];
    var yAxis = chart.scales['y-axis-0'];
    ctx.save();
    chart.data.datasets[0].refLines.forEach(r => {
      var y = yAxis.getPixelForValue(r.y);
      ctx.strokeStyle = r.color;
      ctx.beginPath();
      ctx.moveTo(xAxis.left, y);
      ctx.lineTo(xAxis.right, y);
      ctx.stroke();
    });
    ctx.restore();
  }
}],

Above code assumes that the reference lines are defined inside your dataset through the following definition.

refLines: [
  { y: 45, color: '#0be059' },
  { y: 49, color: '#fc3503' }
]

Please take a look at your amended code and see how it works.

new Chart('canvas', {
  type: 'line',
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      ctx.save();
      chart.data.datasets[0].refLines.forEach(r => { 
        var y = yAxis.getPixelForValue(r.y);
        ctx.strokeStyle = r.color;
        ctx.beginPath();
        ctx.moveTo(xAxis.left, y);
        ctx.lineTo(xAxis.right, y);
        ctx.stroke();
      });
      ctx.restore();
    }
  }],
  data: {
    datasets: [{
      fill: false,
      label: 'signal1',
      backgroundColor: 'rgba(75,192,192,0.4)',
      pointRadius: 5,
      pointHoverRadius: 7,
      borderColor: 'rgba(75,192,192,1)',
      borderWidth: 1,
      lineTension: 0,
      data: [
        { x: '2016-07-14', y: 44 },
        { x: '2016-07-15', y: 52 },
        { x: '2016-07-16', y: 45 },
        { x: '2016-07-17', y: 47 },
        { x: '2016-07-18', y: 35 },
        { x: '2016-07-19', y: 46 },
        { x: '2016-07-20', y: 50 },
        { x: '2016-07-21', y: 44 }
      ],
      refLines: [
        { y: 45, color: '#0be059' },
        { y: 49, color: '#fc3503' }
      ]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          color: 'rgba(151, 151, 151, 0.2)',
          display: false,
          drawBorder: false
        }
      }],
      xAxes: [{
        offset: true,
        bounds: 'data',
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D.M.YYYY',
          }
        },
        gridLines: {
          color: 'rgba(151, 151, 151, 0.2)',
          zeroLineColor: '#979797',
          zeroLineWidth: 1,
          tickMarkLength: 5,
          drawBorder: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="canvas" height="80"></canvas>

Leave a comment