Chartjs-Avoid the first GridLine to be dashed on Chart JS

by

1👍

✅

There is no built-in for the dash effect of the border. You can define its own color or width with the properties zeroLineColor and zeroLineWidth in the gridLines attribute though, but nothing (yet) for the dash effect.

But here is a small workaround using Chart.js plugins : you can draw your own border after everything has been drawn and it will look like it is not dashed.

afterDatasetsDraw: function(chart) {

    // We get all the variables we need (canvas context and scales)
    var ctx = chart.chart.ctx;
    var xAxe = chart.config.options.scales.xAxes[0];
    var xScale = chart.scales[xAxe.id];
    var yAxe = chart.config.options.scales.yAxes[0];
    var yScale = chart.scales[yAxe.id];

    // You can define the color here
    ctx.strokeStyle = "rgb(120, 120, 120)";

    ctx.beginPath();
    // The line is drawn from the bottom left ..
    ctx.moveTo(xScale.left + 0.5, yScale.bottom);
    // .. to the top left ('+ 0.5' is more or less a fix but it is not essential)
    ctx.lineTo(xScale.left + 0.5, yScale.top);
    ctx.stroke();
}

You can see your example updated on this jsFiddle and here is its result :

enter image description here

1👍

To make it work in React. This might help.

 grid: {
  borderDash: [5, 5],
  borderDashOffset: 2,
  color: function (context) {
    if (context.tick.value === 0) {
      return 'rgba(0, 0, 0, 0)';
    }
    return 'rgba(0, 0, 0, 0.1)';
  },
}

Leave a comment