[Chartjs]-How to hide axis using Chartkick.js

by

3👍

The chart component has a library property that allows you to customize the options for the chart. To hide / remove the x-axis for a line chart would look like this:

<line-chart :data="lineData" :library="chartOptions">

…and in your component…

data () {
  return {
    lineData: [
      {name: 'Line A', data: {'1': 3, '2': 4, '3': 2, '4': 1}},
      {name: 'Line B', data: {'1': 2, '2': 3, '3': 4, '4': 1}}
    ],
    chartOptions: {
      layout: {
        padding: {left: 10, right: 5, top: 5, bottom: 2}
      },
      scales: {
        xAxes: [{
          display: false // this hides the x-axis
        }]
      }
    }
  }
}

Because you’re hiding the x-axis you’ll probably want to adjust the layout padding (shown above).

You could also manipulate the xAxes’ ticks property for the callback to return null, but this can still leave too much space.

Leave a comment