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>

Chart.js Dynamically Updating Chart with X Axis Time

I'm using Chart.js version 2.7.1 and I am dynamically updating my Line chart when temperature data comes in.
The problem is that the lines never pass the halfway mark of the x axis in time. Every time I update, the chart auto scales the right side ( max time ) of the x axis to be further out, so my data never approaches the right side of the chart. What I want is for the line to approach the right side, and only a small margin of time is extended into the future for the x-axis each time I update. How can I accomplish this?
Here is how I configure the chart:
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: [],
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: [],
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
Here is the chart:

as you can see in the following snippet and thanks also to Daniel W Strimpel for creating the initial snippet, you problem is in the hot and cold temperature data.
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
both of those arrays have n number of entries in the end missing the y coordinate including the temperature value. I recreated your scenario by deleting the y for the 5 last entries of the cold and hot temperatures data.
The chart will add the date to the x axis, but it will not add a temperature value and the line will not show up.
{x: new Data(2019, 0, 14, 1, 26, 0) }
The code snippet recreates your scenario, you can run it to understand the problem and fix it by adding the y value to the last 5 entries in the getHotTempData and getColdTempData
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: getHotTempData(),
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: getColdTempData(),
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
function getHotTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
function getColdTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="tempChart"></canvas>

Highcharts stacked column: show total when a stack is hidden

I have a stacked column chart with three stacks per column. See https://jsfiddle.net/Lfvnraqd/1/
The tooltip shows the numbers for the individual stack as well as the total of all three stacks (i.e. the total of all proceedings per year). This works fine as long as all stacks are shown. But when I hide one or two stacks by clicking on the corresponding item in the legend, the total shown in the tooltip is that of all visible stacks, but I want it to still show the total of all three stacks. If possible without the need to have a separate series for the total numbers.
Is there a way to do that?
Code:
$(function () {
Highcharts.setOptions({
colors: ['#f59000', '#2274c1', '#90aaef']
});
$('#container').highcharts({
chart: {
borderColor: '#cccccc',
borderWidth: 2,
marginTop: 43,
type: 'column'
},
xAxis: {
categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
tickLength: 20
},
yAxis: {
min: 0,
max: 45,
reversedStacks: false,
tickInterval: 5,
title: {
text: null
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
credits: {
enabled: false
},
title: {
text: 'Number of procedures per year',
y: 18
},
tooltip: {
headerFormat: '<b>Year {point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total procedures: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Resolved before conciliation',
data: [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10]
}, {
name: 'Conciliation successful',
data: [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0]
}, {
name: 'Expert\'s decision',
data: [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
}]
});
});

Summing of the points values need to be done manually because the chart operate only on visible data.
Before you set data in the chart, you calculate its sum:
var data1 = [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10];
var data2 = [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0];
var data3 = [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
var sums = Object.keys(data1).map(i => {
return data1[i] + data2[i] + data3[i];
});
and access the propert sum in tooltip.pointFormatter
pointFormatter: function () {
return this.series.name + ': ' + this.y + '<br/>Total procedures: ' + sums[this.x];
}
Example: https://jsfiddle.net/Lfvnraqd/2/

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);
});