Chartjs-Chart.js Yaxis custom horizontal line and label

by

0👍

✅

You can use the gridLines and ticks styling options to get the intended effect. Here is the relevant Chart.js documentation.

Specifically, for the Y axis, use the following settings:

gridLines: {
  drawBorder: false,
  color: '#aaa',
  zeroLineColor: '#aaa',
  tickMarkLength: 10,
  offsetGridLines: true,
},
ticks: {
  padding: 10,
  mirror: true
}

The mirror and offsetGridLines settings are the most important here for creating the appearance of the grid lines extending below the axis labels.

This configuration creates the following effect:
Chart.js stack bar chart with custom grid lines

Here’s a runnable interactive example:

const ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: '#5595eb',
      data: [10, 30, 39, 20, 25, 34, 0],
    }, {
      label: 'My Second dataset',
      backgroundColor: '#433a93',
      data: [18, 33, 22, 19, 11, 39, 30],
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        stacked: true,
        gridLines: {
          drawBorder: false,
          color: '#aaa',
          zeroLineColor: '#aaa',
          tickMarkLength: 10,
          offsetGridLines: true,
        },
        ticks: {
          padding: 10,
          mirror: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>

<body>
  <canvas id="myChart" width="600" height="400"></canvas>
</body>

0👍

Maybe this plugin can help: chartjs-plugin-annotation

The plugin annotations like a horizontal line on the specific x/y axis.

Leave a comment