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'm trying to implement a chart with different series but each series will have a value for different categories independently.
What I want to have:
What I have today:
With the following code:
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['a1', 't1', 't2', 'l1', 'l2', 'p1']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'a',
data: [267]
},{
name: 't',
data: [0, 21, 400]
},{
name: 'l',
data: [0, 0, 0, 600, 242]
},{
name: 'p',
data: [0, 0, 0, 0, 0, 1000]
}],
});
});
There is free space between bars because series has 0 as values for some category.
I just want to have a "nice" chart with all columns one by one.
Maybe, it's a different way to configure series and categories...
Disable grouping:
plotOptions: {
series: {
grouping: false
}
}
Live demo: http://jsfiddle.net/BlackLabel/x6758dcq/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.grouping
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 wanted to know if it's possible to use an async drill down on treemap?
I have 7000 items that need to be drawn and it stuck while the treemap is creating.
So I think to create treemap by lazy loading. I didn't find any example of treemap with huge data (while the items are below 1000 it's not a problem like in the example of the large treemap).
I will appreciate any help.
Yes, it can be done exactly the same for any type of series.
Example for treemap:
Highcharts.chart('container', {
chart: {
events: {
drilldown: function(e) {
this.addSeriesAsDrilldown(e.point, {
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A1',
value: 11,
drilldown: true
}, {
name: 'A2',
value: 44
}]
});
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A',
value: 6,
drilldown: true
}, {
name: 'B',
value: 2
}]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/knj7bqs5/
I have been pulling my hair out trying to get this highcharts irregular spline with drilldown and couldnt get the drilldown to work. I am new to highcharts and I think it may have to do with my syntax. I have referenced the API and tried a few methods with no luck.
Problem: I wanted to get a irregular spline to show counts of fruits by month. The drilldown would then show counts for types of fruits (apples and oranges). I am able to show the counts of fruits but the drilldown is not working.
The codes is below and also here: http://jsfiddle.net/bu2002/352a0zvr/2/
THanks so much everyone!!!
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'count'
},
min: 0
},
series: [{
name: 'Fruits',
data: [
[Date.UTC(2014, 7, 19),12],
[Date.UTC(2014, 8, 19),5],
[Date.UTC(2014, 9, 19),18]
],
drilldown: 'fruits'
},
{
name: 'Animals',
data: [
[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]
],
drilldown: 'animals'
}
],//end series
drilldown: {
series: [{
id: 'animals',
data: [[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]],
},
{
id: 'fruits',
data: [
[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]
],
}
]
}//end drilldown
};//and options
var chart = new Highcharts.Chart(options);
});
The issue is now that you are providing a drilldown.id on the series. You need to do it per point. For example:
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
It looks to me like you want to have any drilldown on a point in "Fruits" to link to the same drilldown series. This is doable:
series: [{
name: 'Fruits',
data: [{
x: Date.UTC(2014, 7, 19),
y: 12,
drilldown: 'fruits'
}, {
x: Date.UTC(2014, 8, 19),
y: 5,
drilldown: 'fruits'
}, {
x: Date.UTC(2014, 9, 19),
y: 18,
drilldown: 'fruits'
}]
},
See update fiddle.
But here also U dont get 2 splines after clicking on fruits, u just get one.
Is there any way to get that as i have the same issue
fiddle https://jsfiddle.net/surya_swami/zx9dy3uj/40/
drilldown: { series: [{id:"z1",name: "Region-1",
data: [{ name : "July",y: 10},
{ name : "Aug",y: 21},
{ name : "Sept",y: 15}]
},
{id:"z1",name: "Region-2",
data: [{ name : "July",y: 12},
{ name : "Aug",y: 9},
{ name : "Sept",y: 25}]
},
{ id:'z2',name:'Region-3',
data : [{name:'July',y:23},
{name:'Aug',y:41},
{name:'Sept',y:31}]
},
{ id:'z2',name:'Region-4',
data : [{name:'July',y:33},
{name:'Aug',y:23},
{name:'Sept',y:12}]
},
{ id:'z2',name:'Region-5',
data : [{name:'July',y:31},
{name:'Aug',y:39},
{name:'Sept',y:19}]
}
]
}