Categories
Chart.js JavaScript Answers

How to remove the vertical line in the Chart.js line chart?

Spread the love

Sometimes, we want to remove the vertical line in the Chart.js line chart.

In this article, we’ll look at how to remove the vertical line in the Chart.js line chart.

How to remove the vertical line in the Chart.js line chart?

To remove the vertical line in the Chart.js line chart, we can set the options.scales.x.grid.display property to false.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<canvas id='myChart' style='width: 300px; height: 300px'></canvas>

to add the Chart.js script and canvas for the chart.

Then we write:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1,
      borderColor: 'green'
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          display: false
        }
      },
    }
  }
});

to set options.scale.x.grid.display to false to hide the vertical lines in the background.

Now we should only see the horizontal lines displayed in the background.

Conclusion

To remove the vertical line in the Chart.js line chart, we can set the options.scales.x.grid.display property to false.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *