How to set visibility of a point in a Highcharts series? - javascript

I have a stacked column chart in Highcharts with several categories. In the xAxis categories, I just want to show 'Delhi', 'Jammu & Kashmir', 'Madhya Pradesh', 'Maharashtra', 'West Bengal' and 'Kerala' when the chart is loaded for the first time. The user can then select other categories (like 'Andhra Pradesh' by clicking a button). So I want that all categories other than the initial categories to be invisible.
Here is a snippet of the object that I've created. Data is getting displayed for all categories, irrespective of their visibility.
Where am I going wrong?
var revenueComposition = [{
name: 'Grants in Aid',
data: [{
name: 'Delhi',
y:6.4
}, {
name: 'Jammu & Kashmir',
y:57
}, {
name: 'Kerala',
y: 12
}, {
name: 'Madhya Pradesh',
y: 18.7
}, {
name: 'Maharashtra',
y: 13.5
}, {
name: 'West Bengal',
y: 24.6}, {
name: 'Andhra Pradesh',
y: 29.9,
visible: false
}, {
name: 'Bihar',
y: 26.9,
visible: false
}, {
name: 'Chhattisgarh',
y: 21.3,
visible: false
}, {
name: 'Gujarat',
y: 11.9,
visible: false
}, {
name: 'Haryana',
y: 10.2,
visible: false
}, {
name: 'Karnataka',
y: 11.1,
visible: false
}, {
name: 'Odisha',
y: 23.8,
visible: false
}, {
name: 'Punjab',
y: 11.1,
visible: false
}, {
name: 'Rajasthan',
y: 18.3,
visible: false
}, {
name: 'Telangana',
y: 11.2,
visible: false
}, {
name: 'Uttar Pradesh',
y: null,
visible: false
}],
},

Related

Show another bar chart on clicking a particular bar in the main bar chart without disappearing of original bar chart ReactJS

import React, {
useState
} from "react";
import {
render
} from "react-dom";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";
import drilldown from "highcharts/modules/drilldown.js";
drilldown(Highcharts);
export const DrillDown = () => {
const [chartOptions, setChartOptions] = useState({
chart: {
type: "bar",
height: 650,
events: {
drilldown: function(e) {
console.log(e.seriesOptions)
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
Ingredients: {
name: "Ingredients",
color: " #ff0000",
data: [
["Nutrients", 22],
["Sweetners", 13],
["Organic/Natural", 2]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: " #ff0000",
data: [
["Baby's Choice", 37],
["Parent's Choice", 5]
],
enableMouseTracking: false
}
},
drilldowns1 = {
Ingredients: {
name: "Ingredients",
color: "#C8C6C6",
data: [
["Nutrients", 4],
["Sweetners", 2],
["Organic/Natural", 2]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "#C8C6C6",
data: [
["Baby's Choice", 9],
["Parent's Choice", 4]
],
enableMouseTracking: false
}
},
drilldowns2 = {
Ingredients: {
name: "Ingredients",
color: "yellow",
data: [
["Nutrients", 0],
["Sweetners", 0],
["Organic/Natural", 0]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "yellow",
data: [{
name: "Baby's Choice",
y: 0,
drilldown: true
},
{
name: "Parent's Choice",
y: 0,
drilldown: true
}
],
enableMouseTracking: false
}
},
drilldowns3 = {
Ingredients: {
name: "Ingredients",
color: "green",
data: [
["Nutrients", 25],
["Sweetners", 12],
["Organic/Natural", 18]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "green",
data: [{
name: "Baby's Choice",
y: 42,
drilldown: true
},
{
name: "Parent's Choice",
y: 8,
drilldown: true
}
],
enableMouseTracking: false
}
},
series = drilldowns[e.point.name],
series1 = drilldowns1[e.point.name],
series2 = drilldowns2[e.point.name],
series3 = drilldowns3[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series1);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.addSingleSeriesAsDrilldown(e.point, series3);
chart.applyDrilldown();
}
}
}
},
title: {
text: "Category Drivers",
align: "left",
style: {
fontWeight: "200",
fontSize: "2vw"
}
},
xAxis: {
type: "category",
style: {
fontSize: "6vw"
}
},
yAxis: {
min: 0,
labels: {
formatter: function() {
return this.axis.defaultLabelFormatter.call(this) + "%";
},
},
tickInterval: 10,
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: "gray",
textOutline: 'none'
}
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray',
textOutline: 'none'
}
},
legend: {
enabled: true,
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
stacking: "normal"
},
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
style: {
textShadow: false,
fontSize: "1vw"
}
},
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: "Negative",
color: " #ff0000",
data: [{
name: "Baby Tolerance",
y: 12,
drilldown: false
},
{
name: "Ingredients",
y: 16,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 6,
drilldown: false
},
{
name: "Taste",
y: 9,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 0.5,
drilldown: false
},
{
name: "Expert Advocacy",
y: 2,
drilldown: false
},
{
name: "Brand Value",
y: 3.5,
drilldown: false
},
{
name: "Convenience",
y: 2,
drilldown: false
},
{
name: "Price",
y: 3.5,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Mixed",
color: "#bfbfbf",
data: [{
name: "Baby Tolerance",
y: 8,
drilldown: false
},
{
name: "Ingredients",
y: 4,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 3,
drilldown: false
},
{
name: "Taste",
y: 3,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 11,
drilldown: false
},
{
name: "Expert Advocacy",
y: 3,
drilldown: false
},
{
name: "Brand Value",
y: 0.5,
drilldown: false
},
{
name: "Convenience",
y: 3,
drilldown: false
},
{
name: "Price",
y: 0.5,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Neutral",
color: "#ffc000",
data: [{
name: "Baby Tolerance",
y: 1,
drilldown: false
},
{
name: "Ingredients",
y: 0,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 0,
drilldown: false
},
{
name: "Taste",
y: 0,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 0,
drilldown: false
},
{
name: "Expert Advocacy",
y: 0,
drilldown: false
},
{
name: "Brand Value",
y: 0,
drilldown: false
},
{
name: "Convenience",
y: 0,
drilldown: false
},
{
name: "Price",
y: 0,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Positive",
color: " #00b050",
data: [{
name: "Baby Tolerance",
y: 20,
drilldown: false
},
{
name: "Ingredients",
y: 15,
enableMouseTracking: true,
drilldown: 'sad'
},
{
name: "Health Benefits",
y: 11,
drilldown: false
},
{
name: "Taste",
y: 7,
enableMouseTracking: true,
drilldown: 'dsa'
},
{
name: "Peer Recommendation",
y: 5,
drilldown: false
},
{
name: "Expert Advocacy",
y: 11,
drilldown: false
},
{
name: "Brand Value",
y: 11,
drilldown: false
},
{
name: "Convenience",
y: 6,
drilldown: false
},
{
name: "Price",
y: 3,
drilldown: false
}
],
enableMouseTracking: false
}
],
drilldown: {
series: []
}
});
return ( <
div >
<
HighchartsReact highcharts = {
Highcharts
}
options = {
chartOptions
}
/> <
/div>
);
};
I am using recharts for designing the graphs in reactJS. I tried using drilldown function from highcharts to achieve another bar chart on clicking a particular bar of the original bar chart but I don't want the original graph to disappear. I want the original graph to decrease itsenter image description here size and show the new bar chart on its right side.
Here is the code I have written.
And I don't want the original graph to disappear.
Here are the attached images that will be helpful.
On clicking the verbatim button, I have to achieve this
enter image description here
Any kind of help will be appreciated.

Is there any way to create a bar chart with multiple ranges in same row?

I need to make bar chart with multiple ranges in same row.
This is an example from https://apexcharts.com/javascript-chart-demos/timeline-charts/advanced/
My problem is that i need Xaxis in integer type not 'datetime' as it is in this example. When i change Xaxis type to integer chart does not show as i want it because there will be created for every range new column.
This is my output.
var options = {
series: [
{
name: 'Bob',
data: [
{
x: 'Design',
y: [
4,9
]
},
{
x: 'Code',
y: [
5,7
]
},
{
x: 'Code',
y: [
0,1
]
},
{
x: 'Test',
y: [
9,10
]
},
{
x: 'Test',
y: [
4,7
]
},
{
x: 'Validation',
y: [
2,5
]
},
{
x: 'Design',
y: [
1,2
]
}
]
},
{
name: 'Joe',
data: [
{
x: 'Design',
y: [
1,2
]
},
{
x: 'Test',
y: [
4,6
]
},
{
x: 'Code',
y: [
7,9
]
},
{
x: 'Deployment',
y: [
1,5
]
},
{
x: 'Design',
y: [
4,7
]
}
]
},
{
name: 'Dan',
data: [
{
x: 'Code',
y: [
3,5
]
},
{
x: 'Validation',
y: [
2,3
]
},
]
}
],
chart: {
height: 450,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '80%'
}
},
xaxis: {
min: 0,
max: 10
},
stroke: {
width: 1
},
fill: {
type: 'solid',
opacity: 0.6
},
legend: {
position: 'top',
horizontalAlign: 'left'
}
};
This is my code. In other words i need to have for example for 'Bob' in 'Design' two bars. One in range 1-2 and second in range 4-9. Can somebody help me? Is it even posible with apexcharts?

Bubble chart (relations between bubbles)

Please can you tell me, is it possible to create relations between bubbles (lines from one bubble to other(s))?
Example:
SE->FL->NL
FL->DE
SE->BE->DE
DE->NL
Demo:
http://jsfiddle.net/2pLog7fw/

Sure, it can be done. One way of creating lines is to set lineWidth to be higher than zero for bubble series.
Live demo: http://jsfiddle.net/kkulig/2d7u7orx/
But this only creates one relation within a series (from the first point to the last one).
The solution here is to create a new scatter series for every relation:
{
data: [
[80.3, 86.1],
[80.8, 91.5],
[80.4, 102.5]
], // SE -> FI -> NL
type: 'scatter'
}, {
data: [
[86.5, 102.9],
[80.4, 102.5]
], // DE -> NL
type: 'scatter'
}
Configuration for all scatter series (plotOptions):
scatter: {
lineWidth: 1, // show the line
marker: {
radius: 0
}
}
Live demo: http://jsfiddle.net/kkulig/x8r6uj5q/
If you want an arrow that shows the direction of the relation you can use the code from this demo: http://jsfiddle.net/kkulig/mLsbzgnp/

This is right answer for my question:
"You can use scatter series to connect bubbles"
https://github.com/highcharts/highcharts/issues/7410
Example
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 15.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 16,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 16,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 18.8,
name: 'SE',
country: 'Sweden'
}]
}, {
type: 'scatter',
lineWidth: 1,
enableMouseTracking: false,
data: [
[95, 95], [86.5, 102.9],
[86.5, null],
[86.5, 102.9], [80.4, 102.5],
[86.5, null],
[86.5, 102.9], [80.3, 86.1]
]
}]
});
Live demo: http://jsfiddle.net/2pLog7fw/1/

Not able to get value of all drill down bars in highcharts

I am trying fetch bar value from a highchart drill down bar, but i can only fetch from last bar not the remaining onces.
Example is on this url https://jsfiddle.net/pravisivadasan/j8y21axp/
Can any one help me on this?
$(function () {
var chart;
var protocolNames = ['P1','P2','P3','P4','P5'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container_inc',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({ text:''});
chart.yAxis[0].setTitle({text:''});
//chart.xAxis[0].setCategories([], true);
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:0}});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: ''
}
});
}
}
},
title: {
text: 'Incident - inflow vs Outflow'
},
credits: {
enabled: false
},
xAxis: [{
title: {
useHTML: true
},
type: "category",
//categories: protocolNames,
labels: {
useHTML: true,
rotation:0
}
}, {
title: {
useHTML: true
},
type: "category",
opposite: true,
//categories: protocolNames,
labels: {
useHTML: true,
rotation:0
}
}],
yAxis: [{
min: 0,
title: {
text: 'Percentage (%)'
}
}, {
title: {
text: ''
},
opposite: true
}],
tooltip: {
//shared: true
},
plotOptions: {
series: {
events:{
click: function (event) {
alert(event.point.name);
console.log(event);
}
}
}
},
series: [{
name: 'Opening Balance',
data: [{
name: 'P1',
y: 2 ,
drilldown: 'P1OBINC_VM'
}, {
name: 'P2',
y: 3,
drilldown: 'P2OBINC_VM'
}, {
name: 'P3',
y: 4,
drilldown: 'P3OBINC_VM'
},
{
name: 'P4',
y: 2,
drilldown: 'P4OBINC_VM'
},
{
name: 'P5',
y: 4,
drilldown: 'P5OBINC_VM'
}],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'Received',
color: '#000000',
data: [{
name: 'P1',
y: 4,
drilldown: 'P1RecvInc'
}, {
name: 'P2',
y: 5,
drilldown: 'P2RecvInc'
}, {
name: 'P3',
y:2 ,
drilldown: 'P3RecvInc'
},{
name: 'P4',
y:3,
drilldown: 'P4RecvInc'
},{
name: 'P5',
y: 4,
drilldown: 'P5RecvInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Responsed',
color: '#90ED7D',
data: [{
name: 'P1',
y: 2 ,
drilldown: 'P1ResponsedInc'
}, {
name: 'P2',
y: 1,
drilldown: 'P2ResponsedInc'
}, {
name: 'P3',
y: 3,
drilldown: 'P3ResponsedInc'
},{
name: 'P4',
y: 4,
drilldown: 'P4ResponsedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5ResponsedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Resolved',
color: '#F7A35C',
data: [{
name: 'P1',
y: 5,
drilldown: 'P1ResolvedInc'
}, {
name: 'P2',
y: 5,
drilldown: 'P2ResolvedInc'
}, {
name: 'P3',
y: 6,
drilldown: 'P3ResolvedInc'
},{
name: 'P4',
y: 6,
drilldown: 'P4ResolvedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5ResolvedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Carried Forward',
color: '#0000ff',
data: [{
name: 'P1',
y: 6,
drilldown: 'P1CarriedInc'
}, {
name: 'P2',
y: 2,
drilldown: 'P2CarriedInc'
}, {
name: 'P3',
y: 3,
drilldown: 'P3CarriedInc'
},{
name: 'P4',
y: 4,
drilldown: 'P4CarriedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5CarriedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Queued',
color: '#F7A35C',
data: [{
name: 'P1',
y: 12,
drilldown: 'P1QueuedInc'
}, {
name: 'P2',
y:14,
drilldown: 'P2QueuedInc'
}, {
name: 'P3',
y: 15,
drilldown: 'P3QueuedInc'
},{
name: 'P4',
y: 21,
drilldown: 'P4QueuedInc'
},{
name: 'P5',
y: 46,
drilldown: 'P5QueuedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'SLA Hold',
color: '#ffff00',
data: [{
name: 'P1',
y: 3,
drilldown: 'P1SLAInc'
}, {
name: 'P2',
y: 4,
drilldown: 'P2SLAInc'
}, {
name: 'P3',
y: 4,
drilldown: 'P3SLAInc'
},{
name: 'P4',
y: 5,
drilldown: 'P4SLAInc'
},{
name: 'P5',
y: 6,
drilldown: 'P5SLAInc'
}],
tooltip: {
valueSuffix: ' %'
}
}
],
drilldown: {
series: [{
name: 'OB',
id: 'P1OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P1 ',12]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P2OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P2 ',4]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P3OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P3 ',5],
],
Type: 'INC'
},
{
name: 'OB',
id: 'P4OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P4 ',6]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P5OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P5 ',5]
],
Type: 'INC'
},{
name: 'Received',
id: 'P1RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P1 ',2]
],
Type: 'INC'
},{
name: 'Received',
id: 'P2RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P2 ',3]
],
Type: 'INC'
},{
name: 'Received',
id: 'P3RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P3 ',3]
],
Type: 'INC'
},{
name: 'Received',
id: 'P4RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P4 ',2]
],
Type: 'INC'
},{
name: 'Received',
id: 'P5RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P5 ',5]
],
Type: 'INC'
}, {
name: 'Responsed',
id: 'P1ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P1 ',6]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P2ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P2 ',7]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P3ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P3 ',3]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P4ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P4 ',6]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P5ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P5 ',7]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P1ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P1 ',6]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P2ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P2 ',7]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P3ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P3 ',6]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P4ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P4 ',4]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P5ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P5 ',5]
],
Type: 'INC'
},
{
name: 'Carried Forward',
id: 'P1CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P1 ',7]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P2CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P2 ',8]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P3CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P3 ',8]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P4CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P4 ',4]
]
},{
name: 'Carried Forward',
id: 'P5CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P5 ',6]
]
}, {
name: 'Queued',
id: 'P1QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P1 ',2]
]
},{
name: 'Queued',
id: 'P2QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P2 ',3]
]
},{
name: 'Queued',
id: 'P3QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P3 ',4]
]
},{
name: 'Queued',
id: 'P4QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P4 ',5]
]
},{
name: 'Queued',
id: 'P5QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P5 ',6]
]
},{
name: 'SLA Hold',
id: 'P1SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P1 ',7]
]
},{
name: 'SLA Hold',
id: 'P2SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P2 ',5]
]
},{
name: 'SLA Hold',
id: 'P3SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P3 ',4]
]
},{
name: 'SLA Hold',
id: 'P4SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P4 ',3]
]
},{
name: 'SLA Hold',
id: 'P5SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P5 ',7]
]
}]
}
});
});
});

Highcharts JS - share legend color between pie charts

I've two pie charts and i want to share their color of the legend items.
The problem is that one pie has more elements in the legend as the other and their starts with different color.
I my case i can have very different legend items in two pie charts, but there are some equal and they should get the same color.
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Microsoft Internet Explorer",
y: 56.33
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
}]
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 20.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
}]
jsfiddle example here

Color can be set per data point - slice. You could set them to be the same in both series for corresponding data points.
Example: http://jsfiddle.net/m2v2vyj2/1/
}, {
name: "Chrome",
y: 24.03,
color: '#c80'
}, {

Categories

Resources