Develop Reference

Shared tooltip on multiple charts not formatting correctly

I have multiple highcharts in one container and wanted to use a shared tooltip for it.
I am able to generate a shared tooltip for am not able to format it to how I want.
This is my code:
Highcharts.chart('container', {
yAxis: [{
title: {
text: 'Pressure'
},
height: '50%',
lineWidth: 2
}, {
title: {
text: 'Temperature'
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureIn',
chart_pl: 'bottom',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
yAxis: 1,
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureOut',
chart_pl: 'bottom',
data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
yAxis: 1,
}],
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
// console.log(point.series.userOptions.val);
return `${s}<br/>${point.series.userOptions.val}<br/>${point.series.name}: ${point.y}m`;
}, `<b>${this.x}</b><br><br>`);
},
shared: true
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Now my tooltip looks like this:
x axis value
temp-one
TemperatureIn: y axis value
temp-one
TemperatureOut: y axis value
temp-two
TemperatureIn: y axis value
temp-two
TemperatureOut: y axis value
How do I format my tooltip to look like:
x axis value
temp-one
TemperatureIn: y axis value
TemperatureOut: y axis value
temp-two
TemperatureIn: y axis value
TemperatureOut: y axis value
temp-one and temp-two are values stored in point.series.userOptions.val. I am just not sure how to format my tooltip to look like that.

In the tooltip formatter function, try comparing the series name to that of the previous point and only include it if different, e.g.:
Highcharts.chart('container', {
yAxis: [{
title: {
text: 'Pressure'
},
height: '50%',
lineWidth: 2
}, {
title: {
text: 'Temperature'
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-one',
showInLegend: true,
chart_pl: 'top',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
type: 'spline',
name: 'TemperatureIn',
id: 'TemperatureIn',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureIn',
chart_pl: 'bottom',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
yAxis: 1,
}, {
type: 'spline',
name: 'TemperatureOut',
id: 'TemperatureOut',
val: 'temp-two',
showInLegend: false,
linkedTo: 'TemperatureOut',
chart_pl: 'bottom',
data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
yAxis: 1,
}],
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point, i, points) {
// console.log(point.series.userOptions.val);
var series = (i == 0 || point.series.userOptions.val != points[i - 1].series.userOptions.val) ? `${point.series.userOptions.val}<br/>` : '';
return `${s}<br/>${series}${point.series.name}: ${point.y}m`;
}, `<b>${this.x}</b><br><br>`);
},
shared: true
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Can a wind rose chart be created in ECharts?

A very common chart in weather and maritime is a wind rose chart.
Is it possible in echarts to create one of these? It has segmented bands of speed and various sectors per 0-360 directions. See sample chart below or a example of how Plotly gets it done in their library: https://plotly.com/javascript/wind-rose-charts/
If so, what would the code look like? I attempted to alter this sample (https://echarts.apache.org/examples/en/editor.html?c=bar-polar-stack-radial), but it seems in order to get the segmented bands we need to use category in the angleAxis which is not correct.

Take a look on this work. I found this chart (and similar) on the Echarts Gallery but gallery takes a very long time to load or not available on some days but today i'm lucky:
var myChart = echarts.init(document.getElementById('chart'));
var legendName = [
"0.0-0.2 m/s",
"0.3-1.5 m/s",
"1.6-3.3 m/s",
"3.4-5.4 m/s",
"5.5-7.9 m/s",
"8.0-10.7 m/s",
"10.8-13.8 m/s",
"13.9-17.1 m/s",
"17.2-20.7 m/s",
"20.8-24.4 m/s",
"24.5-28.4 m/s",
"28.5-32.6 m/s",
">32.6 m/s"
]
var vocs = [
"0.3 mg/m³",
"0.4 mg/m³",
"0.3 mg/m³",
"0.3 mg/m³",
"0.5 mg/m³",
"0.23 mg/m³",
"0.2 mg/m³",
"0.7 mg/m³",
"0.6 mg/m³",
"0.2 mg/m³",
"0.1 mg/m³",
"0.1 mg/m³",
"0.6 mg/m³",
];
var option = {
tooltip: {
trigger: 'item',
textStyle: {
color: '#fff'
}
},
color: ["#0001F7", "#00B8FE", "#00FFFF", "#00FF68", "#BEFE00", "#FFFF00", "#FFA800", "#E10100"],
angleAxis: {
type: 'category',
data: ["北", "北东北", "东北", "东东北", "东", "东东南", "东南", "南东南", "南", "南西南", "西南", "西西南", "西", "西西北", "西北", "北西北"],
boundaryGap: false, //标签和数据点都会在两个刻度之间的带(band)中间
axisTick: {
show: false //是否显示坐标轴刻度
},
splitLine: {
show: true,
lineStyle: {
// color:"black"
},
},
axisLabel: {
show: true,
interval: 1, //坐标轴刻度标签的显示间隔，在类目轴中有效
},
},
radiusAxis: {
min: 0,
max: 100,
axisLabel: {
show: false
},
axisTick: {
show: false //是否显示坐标轴刻度
},
axisLine: {
show: false //是否显示坐标轴轴线
},
},
polar: {},
series: [{
type: 'bar',
data: [17, 2, 18, 4,
2, 3, 4, 6,
1, 6, 3, 4,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[0],
stack: 'a'
}, {
type: 'bar',
data: [7, 12, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[1],
stack: 'a'
}, {
type: 'bar',
data: [10, 12, 13, 4,
2, 13, 14, 26,
11, 12, 23, 34,
12, 33, 34, 32
],
coordinateSystem: 'polar',
name: legendName[2],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[3],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 4,
2, 3, 4, 6,
1, 2, 3, 4,
1, 2, 3, 1
],
coordinateSystem: 'polar',
name: legendName[4],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
1, 2, 3, 1
],
coordinateSystem: 'polar',
name: legendName[5],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 4,
2, 3, 4, 6,
1, 2, 3, 4,
2, 3, 4, 2
],
coordinateSystem: 'polar',
name: legendName[6],
stack: 'a'
}, {
type: 'bar',
data: [1, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
],
coordinateSystem: 'polar',
name: legendName[7],
stack: 'a'
}],
legend: {
show: true,
data: legendName,
width: 500, //根据宽度调整换行
}
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:600px;"></div>

Time series horizontal bar chart for running queries visualization

I need to build a time series horizontal bar chart that looks something like this. Each bar represents a query running on the cluster. The length of the bar represents the duration. Each query has start time and end time. Multiple queries can have either same start time or end time or both. Queries may be running in parallel.
I am using highcharts/highstocks charting library, wondering what kind of Highchart config I need to use to accomplish it. Please advise.

I would use a columnrange series. Here you have an example of it: https://jsfiddle.net/BlackLabel/6bu8gtaw
It is hardcoded for now, you can edit it and adjust to your requirements.
All used API properties you can find here: https://api.highcharts.com/highcharts
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
height: 200,
borderWidth: 1,
borderColor: '#d3d3d3'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
plotOptions: {
series: {
groupPadding: 0,
pointPadding: 0.1,
grouping: false,
pointWidth: 6,
borderWidth: 0
}
},
title: {
text: null
},
xAxis: {
visible: false,
reversed: false,
min: -3,
max: 7
},
yAxis: {
opposite: true,
min: -3,
max: 18
},
series: [{
data: [
[0, 10, 13]
]
}, {
data: [
[1, 2, 5]
]
}, {
data: [
[1, 6, 9]
]
}, {
data: [
[1, 12, 16]
]
}, {
data: [
[2, 3, 7]
]
}, {
data: [
[2, 7, 12]
]
}, {
data: [
[3, 0, 4]
]
}, {
data: [
[3, 5, 10]
]
}, {
data: [
[3, 10, 14]
]
}, {
data: [
[3, 16, 18]
]
}, {
data: [
[4, 0, 5]
]
}, {
data: [
[4, 6, 11]
]
}, {
data: [
[4, 11, 15]
]
}, {
data: [
[4, 16, 18]
]
}]
});

Highcharts legend index showing -1 on legend click

In this jsFiddle when all the series are de-selected except for series 1, it reads '-1'. Is this a bug in high charts or something I am doing wrong? I have tried a couple things, such as messing with the offset, showEmpty, nothing seems to work. Any ideas?
http://jsfiddle.net/mhant47c/1/
$('#container').highcharts({
chart: {
type: 'bar'
},
yAxis: [{
width: '33.33%',
showLastLabel: false,
id: 'yA0'
}, {
left: '33.33%',
width: '33.33%',
offset: 0,
showLastLabel: false,
id: 'yA1'
}, {
left: '66.66%',
width: '33.33%',
offset: 0,
id: 'yA2'
}],
plotOptions: {
series: {
stacking: 'normal'
}
},
xAxis:{
showEmpty:false,
categories:['a','b','c','d']
},
series: [{
data: [1, 2, 3, 4]
}, {
data: [3, 2, 1, 6]
},
{
yAxis: 1,
data: [23, 43, 56,23, 43, 56]
},{
yAxis: 1,
data: [23, 43, 56,23, 43, 56]
}, {
yAxis: 2,
data: [123, 413, 516,23, 43, 56]
}]
});

The chart tries to center the columns which results in adding an additional category. To prevent this, use min option:
xAxis: {
min: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/6p84vx53/
API Reference: https://api.highcharts.com/highcharts/xAxis.min

Animation origin of Highcharts library

I want to build up a Highchart step-by-step. I got it working, but I'm not happy with the way it gets animated. The animation origin is the y-axis in this case, but I want the bars to rise up from the x-axis.
They do rise up from the x-axis when I have data visible on load. However, I want to start with an empty chart.
http://jsfiddle.net/ueC9g/1/
This is how I initialize highcharts:
new Highcharts.Chart ({
chart: {
type: 'column',
renderTo: 'columnChart'
},
title: {
text: 'Great chart'
},
xAxis: {
categories: ['<5', '5-9', '10-14','15-19','20-24','25-29','30-39','40-49','50-59','60-69','>69'],
min: 0,
max: 10,
title: {
text: 'Age'
},
showEmpty: true
},
yAxis: {
title: {
text: 'Some numbers'
},
min: 0,
max: 20,
showEmpty: true,
alternateGridColor: '#eee'
},
series: [{
name: 'male',
data: [1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]
}, {
name: 'female',
data: [2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]
}],
plotOptions: {
column: {
events: {
}
}
},
credits: {
enabled: false
}
});

When showing/hiding series, highcharts animates the change to the axis instead of the series itself. I can't find anyway to change this behavior. As a workaround, instead of showing/hiding the series why not add it as new on the click:
var i = 0;
$('#addBar').click(function(){
try {
if (i == 0) {
columnChart.addSeries({name:'male',data:[1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]});
}
else if (i == 1) {
columnChart.addSeries({name:'female',data:[2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]});
}
i++;
} catch(e){
console.dir(e);
}
});
I'd set up an initial empty series in my config too, so that the axes draw on start:
series: [{visible: false, showInLegend: false}],
See updated fiddle here.

Please familair with this example: http://jsfiddle.net/VcJ4K/5/
$.each(chart.series[0].data, function(i, point) {
window.setInterval(function() {
point.update(point.y2);
}, 500);
});