Reputation: 63
I am using highcharts and I want to fix the scale to 0-100 instead of auto scaling. Here is my JSfiddle and in this scenario I am using two text fields to justify my requirement. Any help!!
My HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
<input id="min" type="text" value="1"></input>
<input id="max" type="text" value="2"></input>
<button id="change">change!</button>
Script Code:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
id: 'my_y',
lineWidth: 2,
lineColor: '#F33'
},
plotOptions:
{
line:
{
dataLabels:
{
enabled: true,
formatter:function()
{
var pcnt = (this.y);
return Highcharts.numberFormat(pcnt,1) + '%';
}
},
enableMouseTracking: false
}
},
series: [{
name: 'Temperature',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: '#F33'
}]
});
// the button handlera
var chart = $('#container').highcharts();
var yAxis = chart.get('my_y');
var extremes = yAxis.getExtremes();
$('#min').attr('value', extremes.min);
$('#max').attr('value', extremes.max);
$('#change').click(function() {
yAxis.setExtremes($('#min').val(),$('#max').val());
console.info(yAxis)
});
});
And Here is My JSFiddle: http://jsfiddle.net/Wm7ft/
Upvotes: 1
Views: 7154
Reputation: 19103
You can force the min and max values on the y axis like this:
yAxis: {
min:0,
max:100
}
Upvotes: 2