Ng2-charts: Set custom values for y-axis.

Created on 3 Jul 2017  Â·  12Comments  Â·  Source: valor-software/ng2-charts

Currently y axis values are determined form the chat datasource. Is it possible to set max values or custom intervals for y-axis.

For example:
This chart plots percentage values. Since its a percentage, it has to be plotted against the maximum value of 100%. Is it possible to display 100% as the maximum value on y-axis regardless of the chart data.

chart

Most helpful comment

Check the Chart.JS docs for this one. It is set in options.

You didn't post your code, so I am unsure what your variables are, but:

optionsVariable : {
  scales : {
    yAxes: [{
       ticks: {
          steps : 10,
          stepValue : 10,
          max : 100,
        }
    }] 
  }
}

That should do it for you

All 12 comments

I have this issue too. Can anyone please help?

Check the Chart.JS docs for this one. It is set in options.

You didn't post your code, so I am unsure what your variables are, but:

optionsVariable : {
  scales : {
    yAxes: [{
       ticks: {
          steps : 10,
          stepValue : 10,
          max : 100,
        }
    }] 
  }
}

That should do it for you

Thanks. This works. This how my chart looks after applying the change that
you suggested.

On Jul 7, 2017 8:12 PM, "bjines" notifications@github.com wrote:

Check the Chart.JS docs for this one. It is set in options.

You didn't post your code, so I am unsure what your variables are, but:

optionsVariable : {
scales : {
yAxes: [{
ticks: {
steps : 10,
stepValue : 10,
max : 100,
}
}]
}
}

That should do it for you

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-charts/issues/853#issuecomment-313701590,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJRKqxb_mr9Y9sV-ctTP9cQksKb-uLSPks5sLkPDgaJpZM4OL3DC
.

img_20170710_113635

optionsVariable : { scales : { yAxes: [{ ticks: { steps : 10, stepValue : 10, max : 100, } }] } }
it don't work for me.

optionsVariable : { scales : { yAxes: [{ ticks: { min: 0, stepValue : 10, max : 100, } }] } }
but this config work for me

its not 'min', use beginAtZero: true

@bjines
Do you know how I can set dynamically the max value optionsVariable ?
In other words I only want to set max in different events.

this.optionsVariable.scales.yAxes.ticks.max =maxValue didn't work for me, and I got this error : "Cannot set property 'max' of undefined" .

@bjines
if u add in ngOnInit
this.chartOptions.scales.yAxes[0].ticks.max = this.maxYaxis;
must work

But it is always plotting data with respect primary/first axis scaling values. How to plot based on mulitple scaling values?

   yAxes: [{
            stacked: true,            // this also..
            scaleLabel: {
              display: true,
              labelString: 'Flowdata'
            },
            ticks: {
              min: 0, max : 60,steps:5,stepValue:12,
              // Include a dollar sign in the ticks
              callback: function(value, index, values) {
                  return  value + 'ml/s';
              }
            }
          }]

I have added all those things in my code ,still its not working

steps under ticks section is not working for me

y-axis tickes section works for me, Thank you for the code.
Here is my code :

 scales: {
          yAxes: [{
            barPercentage: 6.0,
            categoryPercentage: 6.0,
            ticks: {
             beginAtZero: true,
              callback: function (value, index, values) {
                return '$' + value + 'k';
              },
            }
          }]
        }
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tushartgsit picture tushartgsit  Â·  5Comments

RKornu picture RKornu  Â·  3Comments

sarn3792 picture sarn3792  Â·  4Comments

martinpinto picture martinpinto  Â·  3Comments

mrpotato3 picture mrpotato3  Â·  5Comments