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)
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
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
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/
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.