ankane/vue-chartkick

Barchart and its options for Chart.js

Closed this issue · 1 comments

Hello. I have a problem that I can't force a bar-chart to display all labels.

Screen Shot 2019-03-26 at 15 02 54

Here's a corresponding issue in chartjs/Chart.js#2801, which tells how to solve that with a specific option.

However.

<bar-chart :height="['300px']" :library="barchartOptions" :data='[["Hare Hare Yukai",22],["Large",12],["Ditto",12],["bitto",10],["litto",12]]' :colors="[`#00639c`]"></bar-chart>
export default {
  name: 'app',
  data () {
    return {
      barchartOptions: {
        'scaleShowValues': true,
        'scales': {
          'yAxes': [{
            'ticks': {
              'beginAtZero': true
            }
          }],
          'xAxes': [{
            'ticks': {
              'autoSkip': false
            }
          }]
        }
      },
    }
  }
}

It doesn't get applied at all.

Applying it as

 <bar-chart :height="['300px']" :library="{ scaleShowValues: true, scales: { yAxes: [{ ticks: { beginAtZero: true } }], xAxes: [{ ticks: { autoSkip: false  } }] } }" :data='[["Hare Hare Yukai",22],["Large",12],["Ditto",12],["bitto",10],["litto",12]]' :colors="[`#00639c`]"></bar-chart>

Has no effect either. What's wrong? What have I overlooked?

I was stupid. It works perfectly, I needed to use autoSkip in a yAxes section, not xAxes.