[Chartjs]-Connect the dot vertically instead of horizontally on Line Chart

by

1👍

✅

You can use the Plugin Core API and define a beforeDraw hook that draws the lines directly on the canvas through the CanvasRenderingContext2D.

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

const data = {
  datasets: [
        {label: 'PZ-1',data:[{x:'2022-02-25', y:40.551},{x:'2022-03-01', y:35.889},{x:'2022-03-02', y:34.68},{x:'2022-03-03', y:33.182},{x:'2022-03-04', y:30.82},{x:'2022-03-05', y:29.864},{x:'2022-03-08', y:28.413},{x:'2022-03-10', y:28.413},{x:'2022-03-12', y:28.424},{x:'2022-03-15', y:25.578},{x:'2022-03-17', y:27.07},{x:'2022-03-19', y:27.42},{x:'2022-03-22', y:27.478},{x:'2022-03-24', y:22.817},{x:'2022-03-26', y:22.576},{x:'2022-03-29', y:22.326},{x:'2022-03-31', y:22.011},{x:'2022-04-02', y:21.672},{x:'2022-04-05', y:21.561},{x:'2022-04-07', y:21.307},{x:'2022-04-09', y:34.988},{x:'2022-04-12', y:28.89},{x:'2022-04-14', y:28.618},{x:'2022-04-17', y:28.862},{x:'2022-04-19', y:27.727},{x:'2022-04-21', y:27.493},{x:'2022-04-23', y:27.149},{x:'2022-04-26', y:25.862},{x:'2022-04-28', y:25.59},{x:'2022-04-30', y:25.37},{x:'2022-05-04', y:24.79},{x:'2022-05-06', y:24.927}],backgroundColor: '#778899',borderColor: '#778899',borderWidth: 1,showLine: false},{label: 'PZ-2',data:[{x:'2022-02-22', y:40.994},{x:'2022-03-01', y:55.537},{x:'2022-03-02', y:62.907},{x:'2022-03-03', y:59.462},{x:'2022-03-04', y:55.175},{x:'2022-03-05', y:53.294},{x:'2022-03-08', y:50.284},{x:'2022-03-10', y:49.89},{x:'2022-03-12', y:50.334},{x:'2022-03-15', y:47.137},{x:'2022-03-17', y:48.726},{x:'2022-03-19', y:48.294},{x:'2022-03-22', y:48.002},{x:'2022-03-24', y:40.156},{x:'2022-03-26', y:39.857},{x:'2022-03-29', y:39.678},{x:'2022-03-31', y:39.331},{x:'2022-04-02', y:36.719},{x:'2022-04-05', y:36.438},{x:'2022-04-07', y:36.258},{x:'2022-04-09', y:72.891},{x:'2022-04-12', y:59.97},{x:'2022-04-14', y:59.578},{x:'2022-04-17', y:59.781},{x:'2022-04-19', y:60.408},{x:'2022-04-21', y:60.309},{x:'2022-04-23', y:59.82},{x:'2022-04-26', y:61.679},{x:'2022-04-28', y:61.539},{x:'2022-04-30', y:61.187},{x:'2022-05-04', y:59.871},{x:'2022-05-06', y:59.63}],backgroundColor: '#DB7093',borderColor: '#DB7093',borderWidth: 1,showLine: false},{label: 'PZ-3',data:[{x:'2022-02-22', y:51.455},{x:'2022-03-01', y:44.882},{x:'2022-03-02', y:58.791},{x:'2022-03-03', y:55.118},{x:'2022-03-04', y:48.364},{x:'2022-03-05', y:47.498},{x:'2022-03-08', y:45.477},{x:'2022-03-10', y:44.859},{x:'2022-03-12', y:45.468},{x:'2022-03-15', y:39.599},{x:'2022-03-17', y:40.561},{x:'2022-03-19', y:39.993},{x:'2022-03-22', y:40.232},{x:'2022-03-24', y:33.061},{x:'2022-03-26', y:33.169},{x:'2022-03-29', y:32.99},{x:'2022-03-31', y:32.849},{x:'2022-04-02', y:31.811},{x:'2022-04-05', y:31.412},{x:'2022-04-07', y:31.223},{x:'2022-04-09', y:84.506},{x:'2022-04-12', y:74.415},{x:'2022-04-14', y:74.079},{x:'2022-04-17', y:73.876},{x:'2022-04-19', y:87.873},{x:'2022-04-21', y:87.748},{x:'2022-04-23', y:87.45},{x:'2022-04-26', y:76.555},{x:'2022-04-28', y:76.401},{x:'2022-04-30', y:76.649},{x:'2022-05-04', y:75.585},{x:'2022-05-06', y:75.748}],backgroundColor: '#8B008B',borderColor: '#8B008B',borderWidth: 1,showLine: false}]};
   
const config = {
  type: 'line',
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.ctx;
      ctx.save();
      ctx.strokeStyle = '#aaaaaa';
      var xAxis = chart.scales.x;
      var yAxis = chart.scales.y;
      xAxis.ticks.forEach((t, i) => { 
        const dateString = moment(t.value).format('YYYY-MM-DD');
        const values = chart.data.datasets
                         .filter((ds, i) => !chart.getDatasetMeta(i).hidden)
                         .map(ds => ds.data.find(v => v.x == dateString))
                         .filter(v => v != undefined)
                         .map(o => o.y);  
        if (values.length > 1) {                 
          var x = xAxis.getPixelForTick(i);  
          var yTop = yAxis.getPixelForValue(Math.max(...values));  
          var yBottom = yAxis.getPixelForValue(Math.min(...values));               
          ctx.beginPath();
          ctx.moveTo(x, yBottom);
          ctx.lineTo(x, yTop);
          ctx.stroke();
        }        
      });
      ctx.restore();
    }
  }],
  data,
  options: {
    layout: {
      padding: {
        left: 5
      }
    },
    scales: {
      y: {
        beginAtZero: true        
      },
      x: {
        offset: true,
        type: 'time',
        time: {
          tooltipFormat: 'dd-MMM-yy',
          displayFormats: {
            day: 'dd-MMM-yy'
          }
        },
        grid: {
          display: false
        },
        ticks: {
          source: 'date',
          autoSkip: false
        }
      }
    }
  }
};

new Chart('myChart', config );
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="myChart" height="140"></canvas>

Leave a comment