CODEWITHSUNDEEP
javascripthighcharts
Manuel
Manuel

Reputation: 9522

HighCharts y-Axis set min max with input field on rendered graph axis

I'd like to give a users with HighCharts.chart the option set the min and max for y-Axis. This should be ux friendly. I thought a smart solution could be adding a min and max field to the y-axis. I'm open for better solutions, if there are any around?

I do know I can set min and max as a initial configuration with yAxis.min and yAxis.max, however could not find any configuration or plugin for allowing this to the user. Nor could I find a easy way to extend y-Axis or replace the min and max label with a form field.

How can I extend the y-Axis labels min and max with input field to change min and max for the corresponding plot?

UI idea:

y-Axis with input fields for min and max

Upvotes: 0

Views: 995

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I think that the below demo could be a good start to implement your requirement.

Demo: https://jsfiddle.net/BlackLabel/3y9au2h4/

var minInput = document.getElementById('minInput'),
        maxInput = document.getElementById('maxInput');

minInput.onchange = function() {
    chart.yAxis[0].update({
        min: this.value
    })
}

maxInput.onchange = function() {
    chart.yAxis[0].update({
        max: this.value
    })
}

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update

EDIT

Above labels could be rendered as standalone HTML elements and customized by using the formatter callback.

Demo: https://jsfiddle.net/BlackLabel/e60xj9go/

API: https://api.highcharts.com/highcharts/yAxis.labels.useHTML

API: https://api.highcharts.com/highcharts/yAxis.labels.formatter

Upvotes: 1

Related Questions