How to hide axis using Chartkick.js

问题

I am using https://github.com/ankane/vue-chartkick to draw Vue charts, but looks like it didn't say how to hide axis from there document.

Does anyone know how to do it in this library?

Thanks in advance.

回答1:

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.

来源：https://stackoverflow.com/questions/49974479/how-to-hide-axis-using-chartkick-js