We Keep Coding

Redraw sunburst Chart after update the series

I am trying to update the Sunburst chart series on the change of dropdown. But my chart data series is not updating. Right now When I am trying to update the chart just the tooltip is getting updated chart is not redrawing.
Below is my code and JS fiddle demo URL:
https://jsfiddle.net/n0y87osa/6/
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
plotOptions: {
sunburst: {}
},
series: [{
type: "sunburst",
name: 'Root',
data: data,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
tooltip: {
shared: true,
}
};
var chart = new Highcharts.Chart(options);
$('#type_').on('change',function(){
alert(this.value);
chart.series[0].setData(data2);
chart.redraw()
});

Issue reproduced in a minimal live example: https://jsfiddle.net/BlackLabel/qrhpsbx5/
Error in console: Uncaught TypeError: Cannot read properties of undefined (reading 'x')
The problem occurs because you are incorrectly using the index property in your data. Highcharts uses index from data also to calculate the length of data, which is causing incompatibilities during data updates.
As a solution, you can change the name of the property:
var data2 = [{
id: '0.0',
parent: '',
name: 'KSE ALL',
customIndex: 32819
}, ...];
or store it in custom:
var data2 = [{
id: '0.0',
parent: '',
name: 'KSE ALL',
custom: {
index: 32819
}
}, ...];
Live demo: https://jsfiddle.net/BlackLabel/xnespquj/
API Reference: https://api.highcharts.com/highcharts/series.sunburst.data.custom

I did destroy the chart and redraw it with updated data series.
var chart;
function sunBurstChart (data1){
var options = {
chart: {
height: '70%',
// type: 'sunburst'
renderTo: 'container'
},
series: [{
type: "sunburst",
name: 'Root',
data: data1,
point:{
events:{
click: function (event) {
alert(this.name);
}
}
},
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
/**
* A custom formatter that returns the name only if the inner arc
* is longer than a certain pixel size, so the shape has place for
* the label.
*/
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textOutline : 0,
color: '#fff'
},
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
style: {
fontSize: "12px",
//color: "#515151",
fontWeight: 'normal !important',
fontFamily: "'Open Sans', sans-serif",
textShadow: false ,
backgroundColor: 'rgba(255, 255, 255, 1)',
},
},
},{
level: 2,
dataLabels: {
rotationMode: 'parallel'
}
}, {
level: 3,
colorVariation: {
key: 'brightness',
to: -0.4 //Tells the gradation extent
}
}]
}],
chart = new Highcharts.Chart(options);
}
sunBurstChart(data);
$('#type_').on('change',function(){
// alert(this.value);
chart.destroy();
sunBurstChart(data2);
chart.redraw();
});

chartjs-plugin-datalabels not showing on stacked horizontal bar

I'm trying to make a simple horizontal stacked bar chart and add labels to it. I'm not sure what I'm doing wrong here, any input would be appreciated.
I can make it work by downgrading to a much lower version of chart.js and the datalabel plugin.
Here is a jsfiddle:
https://jsfiddle.net/chrispret/szLgyu2j/24/
And some test code...
const testData = {
set1: '4',
set2: '3',
set3: '1',
set4: '3',
};
const data = {
labels: ["test"],
datasets: [
{
label: 'set1',
data: [testData.set1],
backgroundColor: 'red',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set2',
data: [testData.set2],
backgroundColor: 'blue',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set3',
data: [testData.set3],
backgroundColor: 'green',
datalabels: {
anchor: 'center',
align: 'center',
}
},
{
label: 'set4',
data: [testData.set4],
backgroundColor: 'gray',
datalabels: {
anchor: 'center',
align: 'center',
}
}
]
};
const config = {
type: 'bar',
data: data,
options: {
aspectRatio: 15 / 3,
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2,
}
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
},
plugins: {
datalabels: {
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round
},
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
},
}
},
};
const myChart = new Chart(
document.getElementById('chartDemo'),
config
);

Since version 1.x, the chartjs-plugin-datalabels plugin no longer registers itself automatically. It must be manually registered either globally or locally as described here.
Therefore, to make it work, you could add the following line to your code prior to create the chart.
Chart.register(ChartDataLabels);
Please take a look at your amended code and see how it works.
const testData = {
set1: '4',
set2: '3',
set3: '1',
set4: '3',
};
const data = {
labels: ["test"],
datasets: [{
label: 'set1',
data: [testData.set1],
backgroundColor: 'red'
},
{
label: 'set2',
data: [testData.set2],
backgroundColor: 'blue'
},
{
label: 'set3',
data: [testData.set3],
backgroundColor: 'green',
datalabels: {
anchor: 'center',
align: 'center'
}
},
{
label: 'set4',
data: [testData.set4],
backgroundColor: 'gray'
}
]
};
const config = {
type: 'bar',
data: data,
options: {
aspectRatio: 15 / 3,
indexAxis: 'y',
elements: {
bar: {
borderWidth: 2
}
},
responsive: true,
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
},
plugins: {
datalabels: {
anchor: 'center',
align: 'center',
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round
},
legend: {
position: 'right'
},
title: {
display: true,
text: 'Chart.js Horizontal Bar Chart'
},
}
},
};
Chart.register(ChartDataLabels);
const myChart = new Chart(
document.getElementById('chartDemo'),
config
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chartDemo"></canvas>

Add the labels to the labels array.
const data = {
labels: ["hrZone1","hrZone2","hrZone3","hrZone4"],
datasets: [
{
label: 'peak',
data: [hrData.peak,0,0,0],
backgroundColor: 'red'
},
{
label: 'cardio',
data: [0,hrData.cardio,0,0],
backgroundColor: 'blue'
},
{
label: 'fatBurn',
data: [0,0,hrData.fatBurn,0],
backgroundColor: 'green'
},
{
label: 'under',
data: [0,0,0,hrData.under],
backgroundColor: 'gray'
}
]
};

Replicating a highcharts type

I have included a Highcharts chart embed on my website. Now I would like to create many additional charts using other series data. However, I would like all of these additional charts have exactly the same styling and be the same type as my chart1. The only things I will have to change in each chart is the subtitle and series name. I can easily just copy my chart1 code and rename it chart2, chart3 etc. and this works fine. However, I would very much like to just replicate my chart1 for the other data series while only changing subtitles and series name for each data series (CHART1 SUBTITLE and CHART1 SERIESNAME).
I have tried different solutions but none worked so far. Below is the code I have made for my chart1.
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
text: 'CHART1 SUBTITLE',
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: []
}],
tooltip: {
}
},
};
Below is the code I use to initialize the series data in chart1. Here I have added a 'chart2' and I essentially hoped it would somehow be able to initialize that in 'chart1' and somehow also changing the chart subtitle and series name.
$('chart').ready(function() {
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../companychart/chartdataNew.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart1.series[0].data = json['SERIES 1']['data'];
chartOptions.chart2.xAxis.categories = json['XAXIS NAME']['data'];
chartOptions.chart2.series[0].data = json['SERIES 2']['data'];
});

You can use Highcharts.merge method to extend default options (used in each chart) by particular chart options (series, subtitle). Check the demo posted below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
JS:
var chart1 = {
subtitle: {
text: 'CHART1 SUBTITLE',
},
series: [{
name: 'CHART1 SERIESNAME',
color: '#006699',
data: [1, 2, 3, 4, 5]
}]
},
chart2 = {
subtitle: {
text: 'CHART2 SUBTITLE',
},
series: [{
name: 'CHART2 SERIESNAME',
color: '#0034ef',
data: [5, 1, 2, 6, 2]
}]
},
chart3 = {
subtitle: {
text: 'CHART3 SUBTITLE',
},
series: [{
name: 'CHART3 SERIESNAME',
color: '#23ee45',
data: [3, 5, 2, 3, 1]
}]
},
chartDefaultOptions;
chartDefaultOptions = {
chart: {
type: 'column'
},
title: {
text: 'CHARTNAME',
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 30,
fontSize: '22px'
}
},
subtitle: {
align: 'left',
x: 55,
style: {
fontFamily: 'Montserrat,serif',
spacingTop: 25,
color: "#000",
fontSize: '14px'
}
},
xAxis: {
categories: [],
labels: {
rotation: -20,
}
},
yAxis: {
title: {
text: 'TITLETEXT',
rotation: 270,
y: -30
},
}
};
Highcharts.chart('container1', Highcharts.merge(chartDefaultOptions, chart1));
Highcharts.chart('container2', Highcharts.merge(chartDefaultOptions, chart2));
Highcharts.chart('container3', Highcharts.merge(chartDefaultOptions, chart3));
Demo:
https://jsfiddle.net/BlackLabel/7utogs95/

Highcharts: Tooltip on Y-Axis Labels

Trying to show description about y-axis labels as tooltip.
Is it possible to show corresponding tooltips on y-axis labels?
Here is the Fiddle where I am trying to add tooltip to y-axis lables
Code:
$(function(){
var chart1;
$(document).ready(function(){
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
For each category, I have a tooltip like:
cat1: descrption1
cat2: descrption2
cat3: descrption3
cat4: descrption4
When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:

Use formatter with HTML enabled for labels: http://jsfiddle.net/W5wag/2/
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
return '<span title="My custom title">' + this.value + '</span>';
},
useHTML: true,
style: {
color: 'white'
}
}
},
Of course you need store somewhere reference cat1 <-> description1 to feed span title with description.

Extending Paweł Fus' solution I define the label and title text by delimiting the values for categories using ' - '. The value can then be split into an array by the formatter to display the first array value as the label and the second array value as the title text: http://jsfiddle.net/wqpckxL7/
xAxis: {
categories: ['cat1 - the first and best category',
'cat2 - this category is less popular',
'cat3',
'cat4',
'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
// split using -
var values = this.value.split(" - ");
// check we have more than 1 value
if (values.length > 1) {
// use first item in the array as the displayed label and the second for the title text
return '<span title="' + values[1] + '">' + values[0] + '</span>';
} else {
// if only one value then format as normal
return this.value;
}
},
useHTML: true,
style: {
color: 'white'
}
},
}

Add pointFormat property to your tooltip object as:
tooltip: {
.....,
.....,
pointFormat: '<b>{point.y}</b>',
}
DEMO Link:

How to create in a series multiple data each in a different yaxis using highcharts

I'm working on a project to register pump curves in a MySQL database. So I'm trying to create the closest possible one chart with 3 yAxis (H, NPSH, Power) and 2 xAxis (flow and efficiency). I uploaded a pump curve image here for better understanding. Note this efficiency is a logarithm scale but I prefer to create a linear scale to make it easy.
Well, every curve chart has more one rotor curve, in this case we have 5 curves which is five types of rotor (176mm, 169mm, 162mm, 154mm and 148mm).
Each rotor gives one data series in a yAxis as H, NPSH, Power and Efficiency.
So I need to create a series for each rotor size whem each series get the values ​​of the data: H,NPSH,Power,Efficiency with its yAxis referals.
Here is the link's page with the code.
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Curva da Bomba'
},
subtitle: {
text: 'KSB Meganorm 32-160 | Rotação 1750rpm'
},
xAxis: [{
tickmarkPlacement: 'on',
labels: {
format: '{value}m³/h',
style: {
color: '#005ca2'
}
},
title: {
text: 'Vazão Q (m³/h)',
style: {
color: '#005ca2'
}
}
},{// Rendimento
labels: {
format: '{value}%',
style: {
color: '#005ca2'
}
},
title: {
text: 'Rendimento n (%)',
style: {
color: '#005ca2'
}
},
opposite: true,
top: 90,
height: 0,
offset: 0,
lineWidth: 1
}],
yAxis: [{ // Altura manométrica H
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'Altura manométrica H (mca)',
style: {
color: '#005ca2'
}
},
top: 90,
height: 250,
offset: 0,
lineWidth: 1
}, { // NPSH
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'NPSH (mca)',
style: {
color: '#005ca2'
}
},
top: 380,
height: 120,
offset: 0,
lineWidth: 1
}, {// Potência
title: {
text: 'Potência (hp)',
style: {
color: '#005ca2'
}
},
labels: {
format: '{value} hp',
style: {
color: '#005ca2'
}
},
top: 540,
height: 220,
offset: 0,
lineWidth: 1
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
x: 0,
verticalAlign: 'top',
y: 34,
floating: true,
backgroundColor: '#FFFFFF'
},
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false
},
pointInterval: 1, // one hour
pointStart: 6
}
},
series: [{
name: 'Rendimento n (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [40,44,45.5,48,50,51.5,52.5,53,53.8,54.7,54.6,53.4,53.4,52.5],
dashStyle: 'shortdot',
tooltip: {
valueSuffix: '%'
}
}, {
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'NPSH (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 1,
data: [1.2,1.25,1.3,1.4,1.4,1.4,1.4,1.4,1.4,1.63,1.78,2.5,3.2,4],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'Potência (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 2,
data: [0.8,0.87,0.92,0.96,1.01,1.04,1.08,1.13,1.15,1.19,1.22,1.24,1.26,1.29],
tooltip: {
valueSuffix: 'hp'
}
}]
});
});

You can set which yAxis a series is plotted against by using the yAxis: <index> value in the series setup. For example:
...
{
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
},
yAxis: 1,
}
...
Here is a very quick example of it. You have 2 xAxis and 3 yAxis. No idea if this is how you want to display it but this shows you how to move the axis around.