Chartjs-Chart.js draw y-axis only up to point

by

2👍

✅

You can draw you own lines directly on to the canvas using the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw dashed lines for individual points from the dataset.

const data = [1, 3, 2];
new Chart(document.getElementById("myChart"), {
  type: "line",
  plugins: [{
    afterDraw: chart => {      
      var ctx = chart.chart.ctx; 
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      xAxis.ticks.forEach((value, index) => {
         var x = xAxis.getPixelForValue(undefined, index);         
         var yTop = yAxis.getPixelForValue(data[index]);                  
         ctx.save();
         ctx.setLineDash([10, 5]);
         ctx.strokeStyle = '#888888';
         ctx.beginPath();
         ctx.moveTo(x, yAxis.bottom);             
         ctx.lineTo(x, yTop);
         ctx.stroke();
         ctx.restore();
      });      
    }
  }],
  data: {
    labels: ["A", "B", "C"],
    datasets: [{
      label: "My First Dataset",
      data: [1, 3, 2],
      fill: false,
      borderColor: "rgb(75, 192, 192)",
      lineTension: 0.3
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        offset: true,
        gridLines: {
          color: 'white'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          max: 4,
          stepSize: 1
        }
      }]
    }
  }  
});
canvas {
  max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="10" height="10"></canvas>

Leave a comment