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.
Related
I try to implement this, but for scatter3d:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/point/color
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
color: '#BF0B23'
}, 194.1, 95.6, 54.4]
I would like to specify the color of each bubble in this: https://jsfiddle.net/638yn59p/11/
series: [{
name: 'Data',
colorByPoint: true,
accessibility: {
exposeAsGroupOnly: true
},
data: [[0.052359,-0.316845,0.122564],
You can also specify a wanted color for each point by defining it in the data. When your data is an array of objects, the config should look like this:
[{
x: ...,
y: ...,
z: ...,
color: 'string',
}]
Or you can define it in the array of arrays, but you will need to use the series.keys feature to make able render it.
Demo: https://jsfiddle.net/BlackLabel/g5rvmnhe/
series: [{
name: 'Data',
keys: ['x', 'y', 'z', 'color'],
data: [
[0.052359, -0.316845, 0.122564, 'red'],
]
}]
API: https://api.highcharts.com/highcharts/series.line.keys
Seems like this did the trick: Add variable for the colors:
var colors = ['#FF530D','#FF530D','#FF530D','#FF530D','#FF530D', '#E82C0C', '#FF0000']
Use the variable in the series:
series: [{
name: 'Data',
colorByPoint: true,
colors: colors,
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'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
I has series like this
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 19552.1, 95.6, 54.4]
}]
you can see that I has small points (29.9, 71.5) in this series and other (19552.1) has larger than small point
that make I cant click in small point
how can I deal with this problem
you can see this jsfiddle to know what I mean
Or You could set a minimum length for the columns using the ´minPointLength´ option
http://api.highcharts.com/highcharts#plotOptions.column.events.click
minPointLength: 0,
jsfiddle
how about to use logarithmic yAxis
http://jsfiddle.net/xLcmojzr/2/
$(function () {
$('#container').highcharts({
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
});
});
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/