[Chartjs]-How to style specific gridlines differently in chartJs?

by

1👍

✅

The borderDash option is non scriptable so to achieve this behaviour you will need to use a custom plugin to draw over the default grid lines:

const zeroZeroLines = {
  id: 'zeroZeroLines',
  beforeDatasetsDraw: (chart, args, opts) => {
    const {
      ctx,
      chartArea: {
        top,
        bottom,
        left,
        right
      },
      scales: {
        x,
        y
      }
    } = chart;

    const color = opts.color || 'black';
    const width = opts.width || 1;

    ctx.beginPath();

    ctx.lineWidth = width;
    ctx.strokeStyle = color;

    ctx.moveTo(x.getPixelForValue(0), bottom);
    ctx.lineTo(x.getPixelForValue(0), top);

    ctx.moveTo(left, y.getPixelForValue(0));
    ctx.lineTo(right, y.getPixelForValue(0));

    ctx.stroke();
  }
}

const options = {
  type: 'bubble',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: -4,
        y: 0,
        r: 4
      }, {
        x: 1,
        y: -3,
        r: 10
      }, {
        x: 3,
        y: 3,
        r: 20
      }, {
        x: 0,
        y: 0,
        r: 20
      }],
      backgroundColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        min: -5,
        max: 5,
        grid: {
          borderDash: [2, 2]
        }
      },
      y: {
        min: -5,
        max: 5,
        grid: {
          borderDash: [2, 2]
        }
      }
    },
    plugins: {
      zeroZeroLines: {
        color: 'black',
        width: 1
      }
    }
  },
  plugins: [zeroZeroLines]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Leave a comment