I'm using Highcharts to create two pie charts with the same keys but different data in each chart. My options object look like this:
const chartOptions = {
chart: {
type: 'pie'
},
legend: {
enabled: false
},
tooltip: {
enabled: true,
},
plotOptions: {
pie: {
borderWidth: 0,
cursor: 'pointer'
},
series: {
states: {
hover: {
enabled: true
}
}
}
},
series: [
{
name: 'Chart One',
colorByPoint: true,
size: '50%',
center: ['25%', '50%'],
data: [
{color: '#000000', name: 'One', y: 43},
{color: '#666666', name: 'Two', y: 12},
{color: '#cccccc', name: 'Three', y: 54},
]
},
{
name: 'Chart Two',
colorByPoint: true,
size: '50%',
center: ['75%', '50%'],
data: [
{color: '#000000', name: 'One', y: 32},
{color: '#666666', name: 'Two', y: 78},
{color: '#cccccc', name: 'Three', y: 11},
]
}
]
};
This works almost as expected. But I cannot get one thing working.
On a column chart, when you have multiple series and hover over a point in series A, the corresponding points in the other series will also light up (the other points will dim down). But not in a pie chart. When I hover "Three in "Chart One", "Three" in "Chart Two" is not highlighted.
Is it possible to do this somehow?
In the mouseOver callback function you can find the related point and call setState('hover') on it:
plotOptions: {
...,
series: {
point: {
events: {
mouseOver: function() {
var relatedPoints = [],
series = this.series,
pIndex = this.index;
series.chart.series.forEach(function(s) {
if (s !== series) {
relatedPoints.push(s.points[pIndex]);
}
});
relatedPoints.forEach(function(p) {
p.setState('hover');
});
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/xm7gc5u6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#setState
Related
I've been struggling for the past few days with Highcharts Network Graph Link Labels:
network graph with link label
As shown in the screenshot, all labels are not displayed. We should see also 'test 2' between point C and point A.
The issue comes from the javascript arrow function. Whenever I remove it all labels are ok.
Currently, when the graph initializes all labels are here but fade away once it's done.
all details are in JSFiddle here
`Highcharts.chart('container', {
chart: {
type: 'networkgraph',
marginTop: 80,
backgroundColor: '#343a40' //couleur de fonds
},
title: {
text: 'Network graph',
style: {
color: 'white',
}
},
subtitle: {
text: 'A Force-Directed Network Graph',
style: {
color: 'white',
}
},
plotOptions: {
networkgraph: {
keys: ['from', 'to', 'clabel'],
layoutAlgorithm: {
enableSimulation: true,
integration: 'verlet', //euler or verlet euler takes into account velocity
maxIterations:250,
linkLength: 250
},
point: {
events: { }
},
colors: [],
},
},
series: [{
id: 'language-tree',
dataLabels: {
enabled: true,
shadow: false,
bold: false,
color: 'white',
style: {textOutline: 'none'},
allowedOverlap: false, style: {textOutline: false},
linkFormat:'{point.clabel}', // \u2192 {point.toNode.name}
y: -16
},
// Options for the links
link: {
color: 'white', // #9cd4d4 couleur des fleches 89CFF1
width: 1,
},
marker: {
enabled: true,
radius: 12
},
nodes: [
{'id': 'A'},
{'id': 'B'},
{'id': 'C'},
],
data: [
['A', 'B', 'test 1'],
['A', 'C', 'test 2'],
],
}]
});
`
Any help would be highly appreciated!
Thanks
I've tried to modify the highcharts main script before realizing issue was from the arrow function which I don't know how to enhance it.
I'd like to get all the labels shown in the middle of the each link
Quick and dirty solution:
.highcharts-label.highcharts-data-label {
opacity: 1 !important;
}
I am using High charts packed bubble chart and I need to show different sizes of bubbles according to its value (negative values). It is working fine when I pass positive values but size of the circle not changing when I pass negative values. Is there any way to show chart with negative values?
js fiddle link with code example
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
height: '100%'
},
title: {
text: 'TOP Countries'
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}:</b> {point.value}'
},
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: 0.02
},
dataLabels: {
enabled: true,
format: '{series.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
}
},
series: [{
name: 'ASEAN',
data: [{
name: "ASEAN",
value: -88.2
}]
}, {
name: 'KOR ',
data: [{
name: "KOR",
value: -605.2
}]
}, {
name: 'CHN ',
data: [{
name: "CHN",
value: -427233.7
}]
}, {
name: 'ISA ',
data: [{
name: "ISA",
value: -355.39
}]
}, {
name: 'ANZ ',
data: [{
name: "ANZ ",
value: -3331.4
}]
}, {
name: 'JP ',
data: [{
name: "JP1",
value: -22470857.0
},{
name: "JP2",
value: -21470857.0
}]
}]
});
graph with negative values
graph with positive values
Properties zMin and zMax are not a part of official packedbubble series API, but they are internally used and work as in bubble series.
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '80%',
//zMin: 0,
//zMax: 1000,
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/vro2wzL4/
API Reference:
https://api.highcharts.com/highcharts/series.packedbubble
https://api.highcharts.com/highcharts/series.bubble.zMin
Hi I am new for this High-charts, I am using Tree-map of High-charts,If I saw output in small system values are coming out of box so how to make it responsive or how to display all values at right side like how pie chart all values displaying right side http://jsfiddle.net/7fb3x9ys/. Here is code
Highcharts.chart('container', {
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Fruit consumption'
}
});
Hi I'm trying to update my piechart LIVE without redrawing the piechart, any advice?
this is the function that is being called
var i = 0;
setInterval(function(){
piecharts(i, 1, 2, 3, 4, 5);
i++;
},5000);
function piecharts(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
options3d: {
enabled: false,
alpha: 45,
beta: 0
}
},
title: {
text: 'Number of person in each sector'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} ', //change percentage to y for decimal value
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Avg number of person in this sector over the total of ',
colorByPoint: true,
data: [{
name: 'Sector0',
y: sector0Data
},{
name: 'Sector1',
y: sector1Data
},{
name: 'Sector2',
y: sector2Data
},{
name: 'Sector3',
y: sector3Data
},{
name: 'Sector4',
y: sector4Data
}, {
name: 'Sector5',
y: sector5Data
}]
}]
});
}
For every 5 second, my i will increase by 1 and my pie-chart will be drawn, this works fine but it kept redrawing my chart. any advice? thanks. also, i'm using v4.1.8 of highchart
You should use the update() method for this. Init your chart on the DOM ready event and just call a function in order to update data :
Demo
function updatePiechart(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
var chart = $('#container').highcharts();
chart.series[0].update({
data: [{
name: 'Sector0',
y: sector0Data
},{
name: 'Sector1',
y: sector1Data
},{
name: 'Sector2',
y: sector2Data
},{
name: 'Sector3',
y: sector3Data
},{
name: 'Sector4',
y: sector4Data
}, {
name: 'Sector5',
y: sector5Data
}]
})
}
The reason for the re-render is that you create a new chart every five seconds instead of updating its data.
You need to call the update method for your y point on your chart series data:
chart.series[0].data[0].update(y);
Here is a simple example on how to update the data: Update pie data jsfiddle
Or have a look at the documentation for live data
I am creating column chart using Highcharts library. I am trying to custom Column chart according my requirement but two things I am unable to do.
First, bottom border of the column chart and second is column background for all the series. Look at the image below, what I need to achieve.
What I have done so far is here: jsfiddle
jQuery(document).ready(function(jQuery) {
jQuery('#portlet-content').highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'column'
},
title: {
text: 'Number of Applications'
},
subtitle: {
text: 'BY COUNTRY'
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
padding: 3,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
lineHeight: '14px'
},
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
tooltip: {
formatter: function() {
return '<b style="color:'+this.point.color+'">'+ this.y +'</b>';
},
useHTML: true,
borderWidth: 0,
style: {
padding: 0,
fontSize: '16px'
},
shadow: false
},
series: [
{
name: "United Kingdom",
color: '#32323A',
data: [
[294]
]
}, {
name: "USA",
color: '#EB4825',
data: [
[65]
]
}
, {
name: "United Arab Emirates",
color: '#F7CC1E',
data: [
[35]
]
}
, {
name: "India",
color: '#24C746',
data: [
[23]
]
}
, {
name: "Canada",
color: '#2587EC',
data: [
[18]
]
}
]
});
});
Note: I have modified my answer to better address the specific requests in the original poster's question.
Here's what I would suggest:
Create a stacked column chart, where one of the series is a "dummy" series with which the user can't interact. This will serve as your background.
Here's a quick fiddle I worked up based on the Highcharts stacked column demo: http://jsfiddle.net/brightmatrix/v97p3eam/
plotOptions: {
column: { stacking: 'percent' }
},
series: [
/* this is the "dummy" series
set the "showInLegend" and "enableMouseTracking" attributes
to "false" to prevent user interaction */
{ name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray',
showInLegend: false, enableMouseTracking: false },
/* here's the real data; set a unique color for each
set nulls for the columns where that color/data is not needed */
{ name: 'Series 1', color: 'red', data: [2,null,null,null,null] },
{ name: 'Series 2', color: 'orange', data: [null,2,null,null,null] },
{ name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] },
{ name: 'Series 4', color: 'green', data: [null,null,null,2,null] },
{ name: 'Series 5', color: 'blue', data: [null,null,null,null,1] }
]
Please let me know if this is helpful for you!