Highcharts series , linkedto more than one series - javascript

I want to use the linkedTo option in my series in order to link several series to each other. For instance if I have series with ids: series1, series2, series3, series4, I want to link all of them together expect series2.
What is the syntax of linkedTo: ... ?
I tried using array, like below but it didn't work:
{
id:'series1',
linkedTo: ['series3','series4'],
data : ...
},
...

I found another way for doing this instead of giving an array to the linkedTo option:
you could give linkedTo: null for the first series and give linkedTo: 'series1' for the other series. (link all to the first series)
Also use showInLegend: true for the first series and showInLegend: false for the rest.
Example:
{
id:'series1',
linkedTo: null,
showLegened: true
data : ...
},
{
id:'series3',
linkedTo: 'series1',
showLegened: false
data : ...
},
...

Related

toggle between data and markline in echarts

Given the scatter series with markline in echarts as below :
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter',
markLine: {
data: [
{name: 'average',
type: 'average',
valueIndex: 0}
]
}
}]
};
I wanted to toggle between data and markline. Lets say when markline off , only scattered data should be shown. And when markline on only markline should be shown in the graph.
I think it should work when you simply set the e-chart option accordingly:
when you only want to show the markline, set the symbol for each data-item to none
when you only want to show the data, markLine can be undefined (or set symbol for each markline to none)

Highcharts Treemap with multiple series: getting them all to show in legend

So I have 6 series I'm using in a single highcharts treemap chart where each series is it's own, smaller tree map. I can't get each of the names of the series to appear in the legend because the showInLegend property is a level above the data property.
I've tried two different configurations. First: series is set to my chartData variable, which looks like:
[{
name: key,
stack: key,
id: key,
showInLegend: true,
color: colors[key],
data: sliced
},
{...}]
And so forth. This gives me a single treemap chart with each series underneath the previous, aka they are stacked on top of each other.
If I combine them all into a single data array, I can get the proper chart format I'm looking for, where each individual series is grouped by color/parent and so forth. This was done using data-less data points, like so:
{
name,
id,
showInLegend,
color
}
and each of the other points then would be:
{
name
parent
value
}
This large data array is then given to a series array that looks like:
[{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: dataArray from above,
}]
Again, I want the chart to be multiple tree maps, not one jammed on top of the other. But i also need the legend to show all of those series' names
You can use unofficial legendType: 'point' property and remove unnecessary elements in afterGetAllItems legend event:
var H = Highcharts;
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
e.allItems.splice(2, 6);
});
H.chart('container', {
series: [{
legendType: 'point',
showInLegend: true,
...
}]
});
Live demo: https://jsfiddle.net/BlackLabel/gp2qmvac/
API Reference: https://api.highcharts.com/highcharts/series.treemap.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts

Showing only one tooltip for all. Highstock highcharts

I am using highstock module, indicator module and highcharts into my angular application. For example , here's the option of my highstock chart with indicator.
this.stock = new StockChart({
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
tooltip: {
valueDecimals: 2
},
name: 'AAPL',
id: 'AAPL',
type: 'candlestick',
data: [
[1487635200000, 2354.909912, 2366.709961, 2354.909912, 2365.379883],
[1487721600000, 2361.110107, 2365.129883, 2358.340088, 2362.820068],
[1487808000000, 2367.5, 2368.26001, 2355.090088, 2363.810059],
[1487894400000, 2355.72998, 2367.340088, 2352.870117, 2367.340088],
[1488153600000, 2365.22998, 2371.540039, 2361.870117, 2369.75],
[1488240000000, 2366.080078, 2367.790039, 2358.959961, 2363.639893],
[1488326400000, 2380.129883, 2400.97998, 2380.129883, 2395.959961],
[1488412800000, 2394.75, 2394.75, 2380.169922, 2381.919922],
[1488499200000, 2380.919922, 2383.889893, 2375.389893, 2383.120117],
[1488758400000, 2375.22998, 2378.800049, 2367.97998, 2375.310059],
[1488844800000, 2370.73999, 2375.120117, 2365.51001, 2368.389893],
[1488931200000, 2369.810059, 2373.090088, 2361.01001, 2362.97998],
[1489017600000, 2363.48999, 2369.080078, 2354.540039, 2364.870117],
[1489104000000, 2372.52002, 2376.860107, 2363.040039, 2372.600098],
[1489363200000, 2371.560059, 2374.419922, 2368.52002, 2373.469971],
[1489449600000, 2368.550049, 2368.550049, 2358.179932, 2365.449951],
[1489536000000, 2370.340088, 2390.01001, 2368.939941, 2385.26001],
[1489622400000, 2387.709961, 2388.100098, 2377.179932, 2381.379883],
[1489708800000, 2383.709961, 2385.709961, 2377.639893, 2378.25],
[1489968000000, 2378.23999, 2379.550049, 2369.659912, 2373.469971],
[1490054400000, 2379.320068, 2381.929932, 2341.899902, 2344.02002],
[1490140800000, 2343, 2351.810059, 2336.449951, 2348.449951],
[1490227200000, 2345.969971, 2358.919922, 2342.129883, 2345.959961],
[1490313600000, 2350.419922, 2356.219971, 2335.73999, 2343.97998],
[1490572800000, 2329.110107, 2344.899902, 2322.25, 2341.590088],
[1490659200000, 2339.790039, 2363.780029, 2337.629883, 2358.570068],
[1490745600000, 2356.540039, 2363.360107, 2352.939941, 2361.129883],
[1490832000000, 2361.310059, 2370.419922, 2358.580078, 2368.060059],
[1490918400000, 2364.820068, 2370.350098, 2362.600098, 2362.719971],
[1491177600000, 2362.340088, 2365.870117, 2344.72998, 2358.840088],
[1491264000000, 2354.76001, 2360.530029, 2350.719971, 2360.159912],
[1491350400000, 2366.590088, 2378.360107, 2350.52002, 2352.949951],
[1491436800000, 2353.790039, 2364.159912, 2348.899902, 2357.48999],
[1491523200000, 2356.590088, 2363.76001, 2350.73999, 2355.540039],
[1491782400000, 2357.159912, 2366.370117, 2351.5, 2357.159912]
]
}, {
type: 'sma',
linkedTo: 'AAPL',
params: { period: 5 }
}]
});
}
this code looks like this
If you see, there are two tooltips. One for the candlestick series and another one for SMA series. I want to merge these two tooltips into one in such a way that in one tooltip after open , high , low , close values. SMA series name and the value should come. I tried to do using tooltip formatter but maybe I am missing something so it is not coming in the way I want.
Have you tried to play with the tooltip.shared and tooltip.split parameters? Here is the code:
tooltip: {
split: false,
shared: true
},
Live example: https://jsfiddle.net/s8m90bjt/
API Reference:
https://api.highcharts.com/highstock/tooltip.shared
https://api.highcharts.com/highstock/tooltip.split

Add label to line in Highcharts

I struggle to add a label on top of a line in highcharts .. for example suppose I have 4 series (all visible) with name 'data', 'mean', '+1 std', '-1 std':
And I would like as a result:
I am lost to know how to add it ... even with the documentation it seems I need the abscissa and ordinate to add for each label. How can I retrieve this information? Is it possible to add the label directly when I add the series?
chart.addSeries({
id : 'mean',
name : 'mean',
type : 'line',
lineWidth : 1,
lineColor : 'rgba(0,128,0,0.9)',
color : 'rgba(0,128,0,0.9)',
dashStyle : 'LongDash',
zIndex : 5,
data : [[ext.dataMin, mean], [ext.dataMax, mean]],
enableMouseTracking: false
});
Notice that I do not want to display this information in a legend, but on the chart itself-
You can do this with a dataLabel.
If you disable dataLabels in the plotOptions, but enable them on the first point of each series, you will get exactly what you're asking for.
Code example:
data: [
{
x:0,
y:5,
dataLabels:{
enabled: true,
format: 'label 1: {y}'
}
},
[10,5]
]
Fiddle example:
http://jsfiddle.net/jlbriggs/vtmqLzer/

Highcharts Speedometer, dataLabel for mileage counter

There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.

Categories

Resources