Highstock: setting the navigator's xAxis min and max - highcharts

I am using Highstock charts, and there is a requirement to show line graphs with a fixed x-axis range, irrespective of the data. Setting the xAxis min and max properties accomplishes that for me.
The trouble comes when I try to use the navigator. The API documentation says that the you can include an xAxis object in the navigator options which can contain all of the same properties, but here, setting the min and max properties doesn't seem to do anything: the xAxis on the navigator still begins and ends at the data min and data max. Instead, I'm trying to get it to use the same xAxis settings as the main chart.
I've thought about inserting fake data points into the series at the desired min and max (with a value of null), but was hoping there was a better way to accomplish this.
A simple example can be found here: http://jsfiddle.net/j6GFq/2
$('#container').highcharts('StockChart', {
chart: {},
navigator: {
xAxis: {
min: 0,
max: 100,
ordinal: false
}
},
xAxis: {
ordinal: false,
min: 0,
max: 100
},
rangeSelector: {
enabled: false
},
series: [{
data: [
[10, 20],
[20, 40],
[50, 10]
]
}]
});

Related

Column Highchart not zooming in all the way

I have a column highcharts chart that I am trying to enable zooming on. The issue I am having is that when I try and zoom in on a small slice of the chart it always zooms to 200 and not smaller. How can I get it to zoom into the x area I have actually selected? Here is a fiddle showing the issue.
https://jsfiddle.net/3gh40fpy/
Highcharts.chart('container', {
yAxis: {
min: 0,
max: 1.1
},
series: [{
name: 'series',
data: [
[1, 0.4648303],
[38.6, 0.3659616331],
[76.2, 0.1323167732],
[113.8, 0.0300049188],
[151.4, 0.0049188392],
[189, 0.0009837678],
[226.6, 0.0004918839],
[264.2, 0],
[301.8, 0],
[339.4, 0.0004918839],
[377, 0]
]
}],
chart: {
type: 'column',
zoomType: 'x'
}
});
In case of your chart you should be able to use xAxis.minRange parameter for changing the minimum range to display on xAxis axis:
Documentation:
http://api.highcharts.com/highcharts/xAxis.minRange
xAxis: {
minRange: 1
},
http://jsfiddle.net/xLzvn73o/

add axis behind stacked column

I have here https://jsfiddle.net/ezhp5a4j/6/ an area and a stacked bar chart But I need to achieve something like : adding another series:column behind this actual but not stacked, starting from jan. 2010 and end dec. 2010 with a certain position in y axis, my need is quiet simple, but I don't know how achieve, I think I need another X axis ?
Actually I have:
xAxis: {
type: 'datetime',
ordinal: false
},
Maybe I need add array to this or so?
You could do this with a second axis, but it's not necessary.
If you add your new data series, with some additional parameters to control the size and spacing, it can all use the same x axis.
Example:
{
"name": 'Summary',
type: 'column',
grouping: false, <-- make sure they don't group with the other series
stacking: false, <-- make sure they don't stack on the other series
color: 'rgba(0,0,0,0.5)',
pointRange: 86400000 * 365, , <-- 1 year; set to desired time frame
pointInterval: 86400000 * 365, <-- 1 year; set to desired time frame
pointPadding: 0.01,
groupPadding: 0,
data: [10000, 15000, 9000, 13000]
}
Updated fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/15/
Output:
EDIT for comment:
To add a second axis, you change the xAxis object to an array of objects, like this:
xAxis: [{
type: 'datetime',
ordinal: false
},{
linkedTo: 0,
type: 'datetime',
ordinal: false
}]
If they are going to have different scales, I am not sure that it makes any sense to plot them together, but in that case, you would remove the linkedTo: 0
Then, in your data, you need to specify which data series are plotted on the second axis, by adding xAxis: 1 to the series options (you don't need to specify xAxis: 0 for the other series, as 0 is the default.
Since you have specified a pointStart in your plotOptions, if the series plotted on the second axis will have a different scale, you will need to specify a separate pointStart in that series options.
Update example fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/16/

Highcharts display priority of overlapping labels

When data labels overlap in Highcharts, only one data label is displayed. This seems to be handled randomly. See fiddle:
http://jsfiddle.net/lamarant/rmxLd1d4/
$(function () {
$('#container').highcharts({
title: {
text: 'Label Test'
},
series: [{
type: 'line',
data: [ 10, 10, 10, 10, 10, 10, 50],
dataLabels: {
enabled: true,
color: 'blue',
zIndex: 10
},
zIndex: 10
},
{
type: 'line',
data: [ 11, 11, 11, 11, 11, 11, 49],
dataLabels: {
enabled: true,
color: 'red',
zIndex: 10
},
zIndex: 20
}]
});
});
Notice that the first data label displayed in the chart is from the second series while the rest are from the first series.
I tried setting the priority of the label display using zIndex in both series and series.dataLabel with no luck.
Is there any way to set it so that a designated series always takes priority when Highcharts determines which label to display?
One possible fix is supplying a labelrank for each point, which is used to evaluate their sorting order. If you supply this rank for each point in a series, that series should be considered "above" series without such a rank (or with a lower rank integer value).
In code, manually for each point:
series: [{
data: [
{ y: 11, labelrank: 1 },
{ y:11, labelrank: 1 }
// ...
],
// ...
}]
In code, using the callback function (JSFiddle):
$('#container').highcharts({
// Options ...
}, function() {
var mySeriesIndex = 1;
// For each point in the preferred series
for(i = 0; i < this.series[mySeriesIndex].points.length; i++)
// Set a labelrank
this.series[mySeriesIndex].points[i].labelrank = 1;
});
My current take on the issue itself is this:
With the current implementation of the overlap logic it seems to me that this is a bit of an unintended behavior. The source code uses Array.sort in a way that shifts the positions of the point labels, since Array.sort is not guaranteed to be stable (same-value items wont retain their original order).
If you check your example in Firefox it should work as intended (their implementation of Array.sort is different), while in Chrome it doesn't (not stable). You could hope that this little feature is fixed.

How to create chart with highchart in which bar doesn't start from 0 in y axis?

I'm working with this chart, and the thing I'm trying to create is that for example "Apples" bar does not start from 0 on y axis. Instead of that, I want it to start from from example 25%, and to end in 75% (so that bar in chart (its height) is from 25 to 75, when you look at values in y-axis). Does anyone have an idea of how to do that? What to change?
You can use the column range chart type. See this official demonstration.
Here is a sample of your apples (JSFiddle):
$('#container').highcharts({
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Apples']
},
yAxis: [{
min: 0,
max: 100
}],
series: [{
data: [
[25, 75],
]
}]
});

Highcharts with inverted y-axis, but not inverted data?

Is it possible to invert the y-axis, but not the data? I have a ranking which should start with 1 at the top, not at the bottom, but the columns should stay just normal.
Thanks for any hints!
You can use reversed yAxis, and column series, where each point will have y and low values, where low values are the same as the lowest number. See: http://jsfiddle.net/JVNjs/303/
var max = 10;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: max,
tickInterval: 2,
reversed: true
},
series: [{
type: 'column',
data: [{
y: 1,
low: max
}, {
y: 3,
low: max
}, {
y: 6,
low: max
}]
}]
There is no good easy direct way to do it (afaik).
There are a variety of approaches you could take, however.
This example uses a reversed axis and stacked columns:
http://jsfiddle.net/jlbriggs/JVNjs/301/
stacking:'normal',
It relies on adding a second series that is the difference between your value and the max, which means you must also specify a y axis max.
I left the second series a light grey so you can see them, but you can set their opacity to 0 so that they are invisible.
Other options might include doing some calculations on the y axis label formatter to display the axis labels as you want without having to touch the data.
Highcharts provides an option for this called reversed setting it true will do the work for you.
http://api.highcharts.com/highcharts#yAxis.reversed
reversed: true
here is the jsfiddle
http://jsfiddle.net/bmbhD/

Resources