Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ChartJS set yAxes "ticks"

I am trying to adjust the scales on my yAxes and cannot find any information that isn't outdated.

Basically, I want my yAxes to go from 0 - 100 with steps of 25.

https://codepen.io/brycesnyder/pen/wmJKyv

            yAxes: [
                {
                    ticks: {
                        beginAtZero: true,
                        steps: 10,
                        stepValue: 10,
                        max: 100
                    }
                }
            ]
like image 762
Bryce Snyder Avatar asked Mar 20 '18 19:03

Bryce Snyder


People also ask

How do I set the size of a ChartJS?

To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive .

Is ChartJS customizable?

However, as your data visualization and customization needs grow — the more you'll benefit from getting under the hood of ChartJS. We can refer directly to the ChartJS documentation and customize as much as we need.

How do I change the label color in ChartJS?

With ChartJS 3, you can change the color of the labels by setting the scales. x. ticks. color and scales.


1 Answers

To do this, change stepValue: 10 to stepSize: 25, and remove steps: 10,.

See chart.js docs

like image 130
jtmaher2 Avatar answered Sep 18 '22 18:09

jtmaher2