Chartjs-How to edit style of negative x grid lines on Chart.js?

by

1👍

✅

You can draw the grid lines labels directly on the canvas using the Plugin Core API. It offers a number of hooks that can be used to perform custom code. In your case, you could use the afterDraw as follows:

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    ctx.globalCompositeOperation = "destination-over";
    var xAxis = chart.scales["x-axis-0"];
    var yAxis = chart.scales["y-axis-0"];
    yAxis.ticks.forEach((v, i) => {
      var y = yAxis.getPixelForTick(i);
      ctx.strokeStyle = 'rgb(128, 128, 128, 0.3)';
      ctx.lineWidth = 1;
      ctx.setLineDash(v < 0 ? [10, 5] : []);
      ctx.beginPath();
      ctx.moveTo(xAxis.left, y);
      ctx.lineTo(xAxis.right, y);
      ctx.stroke();
    });
    ctx.restore();
  }
}],

This code uses CanvasRenderingContext2D to draw lines of different style. It iterate over yAxis.ticks using the Array.forEach() method. The line style (i.e. a dash pattern) is defined using method setLineDash() depending on the value v. 

ctx.setLineDash(v < 0 ? [10, 5] : []);

If v is below zero, I provide pattern [10, 5], otherwise an empty array [] in order to obtain a solid line.

Please have a look at below runnable code snippet to see how it works.

new Chart(document.getElementById("chart"), {
  type: "bar",
  plugins: [{
    afterDraw : chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      ctx.globalCompositeOperation = "destination-over";
      var xAxis = chart.scales["x-axis-0"];
      var yAxis = chart.scales["y-axis-0"];
      yAxis.ticks.forEach((v, i) => {
        var y = yAxis.getPixelForTick(i);
        ctx.strokeStyle = 'rgb(128, 128, 128, 0.3)';
        ctx.lineWidth = 1;
        ctx.setLineDash(v < 0 ? [10, 5] : []);
        ctx.beginPath();
        ctx.moveTo(xAxis.left, y);
        ctx.lineTo(xAxis.right, y);
        ctx.stroke();
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ["A", "B", "C"],
    datasets: [{
        label: "Dataset 1",
        data: [10, 15, 10],
        backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"],
        borderWidth: 1
      },
      {
        label: "Dataset 2",
        data: [-15, -10, -15],
        backgroundColor: "rgba(0, 255, 0, 0.2)",
        borderColor: "rgb(0, 255, 0)",
        borderWidth: 1
      }
    ]
  },
  options: {
    layout: {
      padding: {
        left: 12
      }
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        stacked: true,
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        stacked: true,
        gridLines: {
          drawOnChartArea: false
        },
        ticks: {
          stepSize: 5
        }
      }]
    }
  }
});
canvas {
  max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>

Leave a comment