how to enforce the max value on y axis

[abc245]

Hi there,

it's not really an issue, but a question. How can I enforce the max value on Y axis. Currently I define it as follows

<LineChart :chart-data="data" :yTicks="{min: 0, max: 5}" :height="300" />

However the max Y value changes according to the data.

I reuse LineChart component in several places and want to have a flexibility of defining the max Y value.

The LineChart component looks as follows:

import { Line } from 'vue-chartjs'

export default Line.extend({
  props: ['chartData', 'labelname'],
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart(this.chartData, {
      responsive: true,
      legend: {
        // display: false
      },
      layout: {
        padding: 10
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: true
          }
        }],
        yAxes: [{
          gridLines: {
            display: true
          }
        }]
      }
    })
  }
})

Thanks

[apertureless]

Well your example does not make any sense 🙈
You are passing a prop named yTicks to your line-chart but you don't define it anywhere. oO
You need to define the prop and then you can pass it to the options.

import { Line } from 'vue-chartjs'

export default Line.extend({
  props: ['chartData', 'labelname', 'yTicks'],
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart(this.chartData, {
      responsive: true,
      legend: {
        // display: false
      },
      layout: {
        padding: 10
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: true
          }
        }],
        yAxes: [{
          gridLines: {
            display: true
          },
          ticks: {
           min: this.yTicks.min,           
           max: this.yTicks.max,
          }
        }]
      }
    })
  }
})

And then

<line-chart :chart-data="data" :y-ticks="{min: 0, max: 5}" :height="300" />