Search code examples
vue.jschartsechartsvue-chartjs

How to customize Y-Axis label in Chart.js with Vue.js?


I saw many solutions in Stackoverflow but no one is solving my problem.

I want to change the scale of my y axis values.

It will be

0 100 200 300

enter image description here

My Code:

yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                stepSize: 100,
                min: 0,
                max: 300
              }
            }]
          },
          axisLabel: {//},
        }],
        series: [{
          //
          lineStyle: {//},
          areaStyle: {
            normal: {
              //
          },
     itemStyle: {
       normal: {
         //
    }
  },
  data: [236, 0]
}]

I have changed this also.

axisTick: {
    show: false
}

Solution

  • Please use this live example to compare your settings with the example's working settings.

    var options = {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
                {
                    label: '# of Points',
                    data: [236, 0],
                    borderWidth: 1
                }
            ]
      },
      options: {
        scales: {
            yAxes: [{
            ticks: {
              min: 0,
              max: 300,
              stepSize: 100,
              reverse: false,
              beginAtZero: true
            }
          }]
        }
      }
    }