[Chartjs]-How to display certain part of chart.js as dotted while rest as bold?

by

4👍

✅

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the beforeDraw hook to draw lines of different style between different datapoints using text directly on the canvas using CanvasRenderingContext2D.

In case the last data point shall be of different color as well, you can define dataset.borderColor as an array. It should contain an entry for each value, all being identical except the last one. This can be done with Array.map() as follows. 

borderColor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),

Please have a look at the runnable code snippet below.

const data_array = [307.65, 309.54, 307.71, 314.96, 313.14, 319.23, 316.85, 318.89, 316.73, 318.11, 319.55];

var myChart = new Chart('myChart', {
  type: 'line',  
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      data_array.forEach((value, index) => {
        if (index > 0) {
          var valueFrom = data_array[index - 1];
          var xFrom = xAxis.getPixelForTick(index - 1);
          var yFrom = yAxis.getPixelForValue(valueFrom);
          var xTo = xAxis.getPixelForTick(index);
          var yTo = yAxis.getPixelForValue(value);      
          ctx.lineWidth = 5;
          if (index + 1 == data_array.length) {            
            ctx.setLineDash([5, 5]);
            ctx.strokeStyle = 'rgb(0, 0, 255)';
          } else {
            ctx.strokeStyle = 'rgb(255, 99, 132)';            
          }
          ctx.beginPath();
          ctx.moveTo(xFrom, yFrom);
          ctx.lineTo(xTo, yTo);
          ctx.stroke();
        }
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ['2020/05/13', '2020/05/14', '2020/05/15', '2020/05/18', '2020/05/19', '2020/05/20', '2020/05/21', '2020/05/22', '2020/05/26', '2020/05/27', '2020/05/29'],
    datasets: [{
      label: 'Count',
      data: data_array,
      tension: 0,
      showLine: false,
      borderColor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),
      borderWidth: 5
    }]
  },
  options: {
    animation: {
        duration: 0
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Leave a comment