I've started to use a graphic pretty similar to the dual combo axes. I've added the navigator from highstocks but the navigator graphic differs a lot from the graphic.
It seems that the navigator is plotting both series on the same column and I'm not capable of configuring both axis for it.
I'm trying to modify the jsfiddle example but I couldn't make it work:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
},
showInNavigator: true
}, {
name: 'Temperature',
type: 'spline',
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],
tooltip: {
valueSuffix: '°C'
},
showInNavigator: true
}]
http://jsfiddle.net/guconnmn/2/
Here's a workaround for the problem that ewolden pointed out:
I did not find a way to put each series on its own axis in the
navigator.
You can compute the ratio of the both y axes maximums and than update all the points in the second series using new values. That should mimic the presence of the second y axis.
chart: {
zoomType: 'x',
events: {
load: function() {
var chart = this,
navigator = chart.navigator,
ratio = chart.yAxis[0].getExtremes().max / chart.yAxis[1].getExtremes().max;
navigator.series[1].points.forEach(function(p) {
p.update({
y: p.y / ratio
});
}, false);
this.redraw();
}
}
}
Live demo: http://jsfiddle.net/kkulig/p44kx9xn/
You can add both graphs to the navigator using the following code:
navigatorOptions: {
type: 'column' //in the column series
}
And
navigatorOptions: {
type: 'line' //in the line series
}
That said, I did not find a way to put each series on its own axis in the navigator. Furthermore, highstock does not support xAxis categories, see API, highstock.xAxis only supports datetime format. So you will have to fill in timestamps and format them to show months if that is your desired output.
Working example: http://jsfiddle.net/ewolden/p5amaofc/
API on series.navigatorOptions: https://api.highcharts.com/highstock/series.line.navigatorOptions
Related
Use the following chart as an example.
https://jsfiddle.net/albertwang/rqekhf9s/1/
legend: {
symbolHeight: 20,
......
I want to change the height of both of these two legend symbols. However, I can only change the first one by using legend.symbolHeight.
Thank you for your help.
You cannot change the legend size of the spline series, because highcharts uses the same spline symbol in the legend as in the series. You can change the width, and the line will get longer, but height has no effect. If the height was also changed, the legend would not be identical to the series anymore. Imagine if you had 2 series, both with round symbols where one of them is larger than the other. The only way to tell these two apart in the legend, would be the size of the symbol.
There is no setting you can set to achieve what you want, your only option would be to wrap the function that draws the legend symbols.
How to wrap functions in highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
The function that draws legend symbols: https://github.com/highcharts/highcharts/blob/master/js/parts/Legend.js#L1277
If you are going to do this, be aware that you can wrap this function for different series types, or all of them.
To acheieve the wanted result, you can use a simple workaround. Create additional empty spline series with the marker like you want and id property. Next, use linkedTo in basic spline series:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
type: 'spline',
linkedTo: 'fakeSeries',
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],
tooltip: {
valueSuffix: '°C'
}
}, {
type: 'spline',
marker: {
radius: 10,
symbol: 'circle'
},
color: 'black',
name: 'Temperature',
id: 'fakeSeries'
}]
Live demo: https://jsfiddle.net/BlackLabel/8cmurd3q/
API:
https://api.highcharts.com/highcharts/series.spline.linkedTo
https://api.highcharts.com/highcharts/series.spline.marker.symbol
I need to draw a rectangle and other shapes in HighCharts
Going to use a built-in annotations module, but unable to create a simple Rectangle by xAxis & yAxis points
For example - here's the Shape I'm trying to create
annotations: [{
shapes: [{
type: 'rect',
points: [
{
xAxis: 1,
yAxis: 20
}, {
xAxis: 10,
yAxis: 20
}
]
}]
}]
E.g. I wanna stretch it diagonally from 1:20 to 10:20
By documentation such way may work, but it's not.
Is there any way to do what I want?
Your shape object isn't defined in correct way, because xAxis and yAxis parameters are used to specify which axes the point will be connected to.
Second reason why your implementation is not working is the fact that you didn't specified any height and width values of the shape.
If you would like to draw a rectangle between two points (if I clearly understood your expectations), please use Highcharts.SVGRenderer.rect() function to generate it.
You can simply calculate the x and y values of a rect you need to create by Axis.toPixels() value, which converts the axis values to plot pixels values.
Another, and in my opinion the best solution is by creating new fake series, which has only the points for your annotations (and it's unaccessable for users), then create a shape pathtype with all points from that series connected to it. Here is the code and example:
series: [{
data: [{
y: 29.9,
id: 'min'
}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
id: 'max'
}, 194.1, 95.6, 54.4]
}, {
name: 'Fake annotations points',
// To make this series hidden and unaccessible for user.
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
//
data: [{
x: 0,
y: 29.9,
id: '1'
}, {
x: 0,
y: 216.4,
id: '2'
}, {
x: 8,
y: 216.4,
id: '3'
}, {
x: 8,
y: 29.9,
id: '4'
}]
}],
annotations: [{
shapes: [{
type: 'path',
points: ['1', '2', '3', '4'],
}]
}]
});
Live example: http://jsfiddle.net/quag6ey2/
The edge style of lines in previous versions of highcharts (at least through 2.2) end with a blocky edge when encountering a null value. In the current version of highcharts, the edge is rounded, this makes it more difficult to discern short lines in charts I'm making from points that are from another series. Here's how I want the lines to look using highcharts 2.2: jsfiddle
I can't figure out how to make them look that way using the current highcharts: jsfiddle. I've tried things like disabling the marker and adding square markers, but no luck.
Here's the code to create the chart:
<script src="http://code.highcharts.com/2.2/highcharts.js"></script>
or
<script src="http://code.highcharts.com/highcharts.js"></script>
and this plot:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
}
}
},
series: [{
data: [29.9, 71.5, 106.4, null, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2012, 0, 1),
pointInterval: 24 * 36e5
}]
});
Set plotOptions.line.dashStyle to 'Solid'. Example JSFiddle.
(This should be default, so why setting it explicitly makes them non-rounded is strange.)
We have two series that their series types are 'spline' and 'column'. I show them dynamical and if we get first serie type 'spline',column will block spline serie on the back side of graph. Is there a way that 'always show spline front side of column' ? here is the sample:
http://jsfiddle.net/4NN8H/
series: [{
name: 'Temperature',
color: '#89A54E',
type: 'spline',
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],
tooltip: {
valueSuffix: ' °C'
}
},{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, ]
You can use series index which allows to define order of series.
http://jsfiddle.net/4NN8H/2/
http://api.highcharts.com/highcharts#series.index
Simply Array.sort() them the way you want:
series = series.sort(function (a, b) {
if (a.type > b.type) return 1;
if (a.type < b.type) return -1;
});
This is just an easy sample. You can introduce your own, more sophisticated sort logic.
http://jsfiddle.net/4NN8H/1/
Is there a easy way to use different suffix values on each line?
Right now I have 3 lines, I'm trying to change the suffix for each, but I was only able to find it using the formatter function.
But if I use the formatter function I need to edit every tooltip, make it just like the default one, and I don't know the default format.
I mean, a easy way like changing colors, what we can simply do:
{
name: 'First line',
type: 'line',
color: '#33CC66',
zIndex: 0,
data: [ ... ]
}
I think this is what you want. You can specify the tooltip attribute on each series and use valueSuffix :
http://jsfiddle.net/aXvcw/
tooltip: {
formatter : function() {
return this.y + ' ' + this.series.tooltipOptions.valueSuffix;
}
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
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],
tooltip: {
valueSuffix: '°C'
}
}]
Modified from this demo: http://www.highcharts.com/demo/combo-dual-axes.
You don't need to provide the tooltip formatter function either, but if you wanted other than the default, that is how you could access the series valueSuffix.