CODEWITHSUNDEEP
chart.js
Evan Butler
Evan Butler

Reputation: 667

How to show scale labels and set min/max for yAxes?

Using v2.0beta of Chart.js

I'm having trouble displaying the xAxes and yAxes scale labels, as well as setting the yAxes min/max.

I need the yAxes ticks to range from -10 to 120 in increments of 10....this was super easy to do in v1 but I had to switch to v2.0 in order to invert the yAxes...help would be much appreciated :)

Tried setting it up in a jsfiddle but couldn't get it to work, sorry.

Here's my Line object:

var chart = new Chart(context, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [
                {
                    position: "top",
                    scaleLabel: {
                        display: true,
                        labelString: "Frequency (Hz)",
                        fontFamily: "Montserrat",
                        fontColor: "black",
                    },
                    ticks: {
                        fontFamily: "Montserrat",
                    }
                }
            ],
            yAxes: [
                {
                    position: "left",
                    scaleLabel: {
                        display: true,
                        labelString: "dB",
                        fontFamily: "Montserrat",
                        fontColor: "black",
                    },
                    ticks: {
                        fontFamily: "Montserrat",
                        reverse : true,
                        min: -10,
                        max: 120,
                    },
                }
            ],
        },
    }
});

Upvotes: 2

Views: 14173

Answers (2)

Seán Gahan
Seán Gahan

Reputation: 84

I know you were asking for set boundaries, but with my chart I do not know what the scale is so I look at the data and get the Hi/Low and adjust the chart to match the data.

    var hi = data.datasets[3].data[0];
    var lo = data.datasets[1].data[data.datasets[1].data.length - 1];


     ticks: {
        max: hi,
        min: lo,
        stepSize: 10
        }
    }

Hope this helps someone.

Upvotes: 0

Lee Han Kyeol
Lee Han Kyeol

Reputation: 2481

A bit late answer but Chart.js v2.0beta doesn't seem to support those tick options well.

I updated your fiddle. I updated Chart.js v2.0beta to Chart.js v2.5, which is the latest Chart.js for now.

Your tick options should look like

ticks: {
  min: -10,
  max: 110,
  stepSize: 10,
  reverse: true,
},

Upvotes: 2

Related Questions