Border behind grid line

Question

I'm trying to show the gridline above the chart but behind the chart border and I didn't found any solution for that.

I used z to show the gridline above the chart and changed the gridline color to the background color. That hides the grid line that outside the chart but I still have an annoying line on the chart border that I don't know how to hide...

here is what I'm talking about:

My configuration:

 this.myChart = new Chart(this.canvasRef.current, {
      type: "line",
      options: {
        title: { display: false },
        legend: { display: false },
        elements: {
          point: {
            radius: 0,
          },
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: true,
                color: "#f8f8f8",
                lineWidth: 1,
                z: 1,
                drawTicks: false,
                zeroLineColor: "#f8f8f8",
              },
            },
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false,
              },
              ticks: {
                display: false,
              },
            },
          ],
        },
      },
      data: {
        labels: [2.7, 3.7, 5.7, 6.7, 7.7, 8.8, 9.9],
        datasets: [
          {
            data: [86, 114, 106, 106, 107, 111, 133],
            borderColor: "#3e95cd",
            backgroundColor: "rgba(63, 121, 230, 0.4)",
            fill: true,
          },
        ],
      },
    });

Are you using chert.js or a custom plugin? – Asiri Hewage Jul 24 '20 at 00:53 — Asiri Hewage, Jul 24 '20 at 00:53

score 2 · Answer 1 · answered Jul 24 '20 at 00:55

2

Use borderWidth: 0 inside the datasets as the following.

...
datasets: [
  {
    data: [86, 114, 106, 106, 107, 111, 133],
    borderWidth: 0,
    backgroundColor: "rgba(63, 121, 230, 0.4)",
    fill: true,
  },
],
...

answered Jul 24 '20 at 00:55

polyglot

822
5
9

uminder · Accepted Answer · 2020-07-25T16:55:00.267

You can draw your own grid lines directly on to the canvas using the Plugin Core API. It offers different hooks that may be used for executing custom code. You can use the afterDraw hook to draw vertical lines up to individual points contained in the dataset but stop just underneath the line.

ctx.lineTo(x, yTop + 2);

Please have a look at your amended code below.

new Chart('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'];
      ctx.save();
      xAxis.ticks.forEach((value, index) => {
        var x = xAxis.getPixelForTick(index);
        var yTop = yAxis.getPixelForValue(chart.config.data.datasets[0].data[index]);        
        ctx.strokeStyle = '#f8f8f8';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x, yAxis.bottom);
        ctx.lineTo(x, yTop + 2);
        ctx.stroke();        
      });
      ctx.restore();
    }
  }],
  data: {
    labels: [2.7, 3.7, 5.7, 6.7, 7.7, 8.8, 9.9],
    datasets: [{
      data: [86, 114, 106, 106, 107, 111, 133],
      borderColor: "#3e95cd",
      backgroundColor: "rgba(63, 121, 230, 0.4)",
      fill: true
    }]
  },
  options: {
    legend: {
      display: false
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false,
          display: false
        },
        ticks: {
          display: false,
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

thank you! It's working... how can I define the line width? And how can I show the hover line (https://stackoverflow.com/questions/45159895/moving-vertical-line-when-hovering-over-the-chart-using-chart-js) above the line I draw? — ronara, Jul 25 '20 at 15:04
@ronara: You can define the width of the grid line through `ctx.lineWidth`. I just updated the code and defined `ctx.lineWidth = 2;` in order to show how it works. Regarding the hover line, this is a complete new issue that needs further investigation. Please give it a try and post a new question for this new issue in case you get stuck. — uminder, Jul 25 '20 at 16:57

Border behind grid line

2 Answers2