I want to build a sankey diagram with some looping items.
I found this JSFiddle example:
Highcharts.chart('container', {
chart: {
marginLeft: 100,
marginBottom: 200,
marginRight:200
},
title: {
text: 'Highcharts Sankey Diagram'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['a', 'b', 5 ],
['b', 'c', 5 ],
['c', 'b', 5 ],
],
clip: false,
type: 'sankey',
name: 'Sankey demo series'
}]
});
It works, but some modifications of the series give errors.
For example this data guides to
Uncaught TypeError: Cannot read property 'options' of undefined
error in console:
['a', 'b', 5 ],
['b', 'c', 5 ],
['c', 'a', 5 ],
So is there any possibility to loop it back to the first element?
As of today, circular references are not supported in sankey diagrams in highcharts. See the open issue at github for more details: https://github.com/highcharts/highcharts/issues/8218.
Related
I started exploring highcharts. Created report with organization hierarchy with drilldown.
Unable to format the links in drilldown report, they look like triangles instead of straight lines like in the main org chart and getting messy when the hierarchy in the drilldown gets multiple nodes.
In below example, click on Div.2, see the drilldown links. What chart options do we have to control these triagle svg shapes other than linkLineWidth etc..
Links with Triangle Shape
jsfiddle Test Case
Highcharts.chart('container', {
chart: {
height: 600,
width: 600,
inverted: true,
type: 'organization'
},
title: {
text: 'Highcharts Org Chart'
},
series: [{
name: 'Highsoft',
data: [{
from: "CO",
to: "DIV01",
},
{
from: 'CO',
to: 'DIV02'
}
],
nodes: [{
id: 'DIV01',
title: 'Div Hd 1',
name: 'Div. 1',
drilldown: "DIV01"
},
{
id: 'DIV02',
title: 'Div Hd 2',
name: 'Div. 2',
drilldown: 'DIV02'
}
]
}],
drilldown: {
activeDataLabelStyle: {
color: 'contrast'
},
layout: 'hanging',
series: [{
id: "DIV01",
name: "DIV01",
keys: ['from', 'to'],
data: [
['DIV01', 'DEP01']
],
nodes: [{
id: 'DEP01',
title: 'Dept Hd 1',
name: 'Dept. 1'
}]
},
{
id: "DIV02",
name: "DIV02",
keys: ['from', 'to'],
data: [
['DIV02', 'DEP02'],
['DEP02', 'DEP03'],
['DEP02', 'DEP04'],
['DEP04', 'DEP05'],
['DEP04', 'DEP06'] ,
['DEP04', 'DEP08'] ,
['DEP06', 'DEP07']
],
nodes: [{
id: 'DEP02'
}]
}
]
}
});
It's a bug, more information you will find in Github issue, workaround you can change patch color via CSS fill: none.
.highcharts-series path {
fill: none;
}
demo: https://jsfiddle.net/BlackLabel/ay1czgxp/
I would like to make the color of the slices dependend of the category['A','B','C','D']. Example, if the category 'B' is in the dataset, it should always be orange. My example doesn't work because I use the keys attribute in combination with data and it should be category. I don't seem to find a way doing this if at all possible?
{
series: [{
keys: ['y', 'color'],
data: [
['A', 'red'],
['B', 'orange'],
['C', '#abcf44'],
['D', '#acb222']
]
}]
}
Dataset:
Category %
A 10%
B 30%
C 10%
D 30%
Dataset
Example pie
You can define your data as an array of objects with defined name, color and y properties:
series: [{
type: 'pie',
data: [{
name: 'A',
color: 'red',
y: 10
}, {
name: 'C',
color: 'orange',
y: 30
}, {
name: 'D',
color: '#abcf44',
y: 10
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/jenfgwdk/
API Reference: https://api.highcharts.com/highcharts/series.pie.data
I adapted the highcharts population pyramid (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-negative-stack/) as follows:
I omitted the option "categories", instead used the option "type: 'category'" and added the categories to the data series. I want to do this because the data comes as a tuple from a file. Unfortunately, the right-hand x-axis is not labeled correctly. I want the right hand x-axis labeled same as the left one. Is this possible without using the option "categories"?
Here is the jsfiddle: https://jsfiddle.net/nehqb9k4/
chart : {
renderTo: 'container',
type: 'bar',
height: 480,
},
xAxis : [{
type: 'category',
reversed: false,
}, { // mirror axis on right side
type: 'category',
opposite: true,
linkedTo: 0,
reversed: false,
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Male',
data: [
['0-4', -2.2],
['5-9', -2.1],
['10-14', -2.2],
['15-19', -2.4],
['20-24', -2.7],
['25-29', -3.0],
['30-34', -3.3],
['35-39', -3.2],
['40-44', -2.9],
['45-49', -3.5],
['50-54', -4.4],
['55-59', -4.1],
['60-64', -3.4],
['65-69', -2.7],
['70-74', -2.3],
['75-79', -2.2],
['80-84', -1.6],
['85-89', -0.6],
['90-94', -0.3],
['95-99', -0.0],
['100 +', -0.0]
]
}, {
name: 'Female',
data: [
['0-4', 2.1],
['5-9', 2.0],
['10-14', 2.1],
['15-19', 2.3],
['20-24', 2.6],
['25-29', 2.9],
['30-34', 3.2],
['35-39', 3.1],
['40-44', 2.9],
['45-49', 3.4],
['50-54', 4.3],
['55-59', 4.0],
['60-64', 3.5],
['65-69', 2.9],
['70-74', 2.5],
['75-79', 2.7],
['80-84', 2.2],
['85-89', 1.1],
['90-94', 0.6],
['95-99', 0.2],
['100 +', 0.0]
]
}]
You need to set the right xAxis for the second series:
series: [{
// xAxis: 0 by default
name: 'Male',
data: [
...
]
}, {
name: 'Female',
xAxis: 1,
data: [
...
]
}]
Live demo: https://jsfiddle.net/BlackLabel/70yv1Lae/
API: https://api.highcharts.com/highcharts/series.bar.xAxis
I am using highcharts graphs, Start point of highcharts is showing in my laptop (maximum resolution: 1920*1080).
But when I am an open same graph in a lower system: maximum resolution (1368*768) That time the first point of x-axis not showing
Note : Given image is not match with data but graph is same.
CODE :
$('#call_cc_graph_data').highcharts({
chart: {
type: 'spline',
zoomType: 'x'
},
title: {
text: 'CPS vs Time'
},
xAxis: {
type: 'datetime',
min : 1533873600000,
max : 1533945599000,
},
series:[{
name: 'CC',
data: [[1533876120000,1],[1533876240000,1],[1533876840000,2],[1533876900000,1],[1533877200000,7],[1533877260000,4],[1533877320000,1]]
}]
});
Expected result of image : It needs to show value 05:00 on starting point of x-axis.
Try with xAxis.startOnTick Doc and maybe xAxis.tickInterval Doc
xAxis: {
type: 'datetime',
min : 1533873600000,
max : 1533945599000,
startOnTick:true,
tickInterval:3600 * 1000 // If 2 hours step is too large
},
Fiddle
You can change default xAxis units option:
xAxis: {
type: 'datetime',
units: [
[
'second', [20, 40]
],
[
'minute', [1, 2, 5, 10, 15, 30]
],
[
'hour', [1, 2, 3, 5, 6, 8, 12]
],
[
'day', [1, 2]
],
[
'week', [1, 2]
],
[
'month', [1, 2, 3, 4, 6]
],
[
'year',
null
]
],
min: 1533876120000,
max: 1533945599000
},
Live demo: http://jsfiddle.net/BlackLabel/pskqo6ad/
API: https://api.highcharts.com/highcharts/xAxis.units
Similar problem: https://github.com/highcharts/highcharts/issues/5437
I have two groups of stacked bars in a chart and I would like to group them visually
So how could I add extra vertical gap between specific bars in a stacked bar chart or separate the groups in some other way?
Example:
http://jsfiddle.net/KrTbz/41/
I would like to add extra vertical space between bars 4 and A
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
},
title: {
text: 'Grouping test',
},
xAxis: {
categories: ['1', '2', '3', '4', 'A', 'B', 'C', ]
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [{
name: 'Alpha',
data: [31, 27, 23, 22, 22, 20, 21]
}, {
name: 'Omega',
data: [5, 6, 7, 5, 6, 6, 5, ]
}, {
name: 'Gamma',
data: [60, 62, 67, 69, 68, 70, 71]
}]
});
});
It is not possible in simple way, but only what comes to my mind is quite dirty solution but maybe will be enough. So you can set null values in series and in categories.
http://jsfiddle.net/KrTbz/42/
xAxis: {
categories: [ '1','2','3','4','','A', 'B', 'C', ]
},
series: [
{
name: 'Alpha',
data: [31,27,23,22,null,22,20,21]
}, {
name: 'Omega',
data: [5,6,7,5,null,6,6,5,]
} ,{
name: 'Gamma',
data: [60,62,67,69,null,68,70,71]
}
]