Short question : Is there a way to set min/max in Highcharts AFTER the chart has been created. I am aware of intial setup like y: {min: 100,max: 200} at the chart initialization but I want to change max/min later on dynamically.
I guess setExtremes is the best way to go about it.
Syntax should be: chart.yAxis[0].setExtremes(100,300);
If one wants to just set minimum then chart.yAxis[0].setExtremes(100,null); worked for me.
we can also use update method
chart.yAxis[0].update({
max: 100
});
chart.xAxis[0].update({
max: 150
});
Also you can use tickPositioner http://api.highcharts.com/highcharts#yAxis.tickPositioner to define min/max values and ticks between these values.
Related
I want to decrease the tickinterval of primary y-axes in my dual axes chart so that the columns height could increase. Chart is working well but due to high intervals, columns height is getting small. The data is dynamic and will remain the same as I have used in the example on jsfiddle.
Please see the jsfiddle i have created for this.
`http://jsfiddle.net/mr6dyh94/2/`
You have to set alignTicks property to false. In API documentation we can read:
tickInterval: number
...
If the chart has multiple axes, the alignTicks option may interfere with the tickInterval setting.
chart: {
alignTicks: false
}
Live demo: http://jsfiddle.net/BlackLabel/dcpz592x/
API: https://api.highcharts.com/highcharts/chart.alignTicks
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
see this jsfiddle: http://jsfiddle.net/k0hrz224/2/
i want the max value of the yaxis to be 100. currently, as you can see, it is 150 and i dont know why, because i explicitly set max: 100 of this yaxis.
i know that changing (on line 101)
min: -25
to
min: 0
seems like a solution. however i need min: -25 because i want to display A and B as it is shown in the example.
Things can get a little odd when you have multiple y axes.
Add this to your chart:
chart: {
alignTicks:false
}
Which will stop the different axes from trying to resolve with each other, and stop your axis at 100.
Example:
http://jsfiddle.net/jlbriggs/k0hrz224/4/
Reference:
http://api.highcharts.com/highcharts#chart.alignTicks
finally i managed to do it. i "hardcoded" the ticks on my own:
tickPositions: [-25, 0, 25, 50, 75,100]
then i experienced the desired behavior, i.e., no wrong autoscaling of any axis.
I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/
Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?
From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):
// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}
I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:
{
name: 'Series 1 error bars',
data: [
[4,7.26,7.34],
[12,6.85,7.06],
[26,6.92,7.12]
],
linkedTo: ':previous',
color: "#013879",
zIndex: 0,
whiskerLength: 7,
type: 'errorbar',
pointRange: 0
}
Check this JSFiddle link for pointRange in action.
The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.
There, bizarrely, doesn't seem to be a way to target which Y axis a series is added to using the chart.addSeries() method. Nothing here (http://api.highcharts.com/highstock#Chart.addSeries%28%29) about targeting axes. This results in lines destined to be plotted against the oposite axis being incorrectly plotted in the left hand one; something I would have thought to be a basic prerequisite of the method.
Has anyone seen any hacks or plugins that might solve this or know where to go in the source to fix this?
That's what the yAxis property is used to specify in the series configuration object you pass into addSeries as the options parameter.
You can add serie as you define series in Highcharts, so you can use yAxis index. Take look at example http://jsfiddle.net/68Fp4/1/
$('#button').click(function() {
chart.addSeries({
name: 'ADBE',
data: ADBE,
yAxis:1
});
});