I am trying to do drilled down on column grouped chart.
Attaching here the jsfiddle. http://jsfiddle.net/fbCE2/2/
When I drill down to the first level, I don't see proper data from the Categories1 defined here.
In my code, I have all these second level categories and data are dynamic.
Data:
**Region | ProgramLevel | UniversityCount**
-------------------------------------------------
East | Gold | 1
North | Gold,Silver | 1,2
Northeast | Silver | 1
West | Gold,Platinum,Silver | 3,2,2
I want these program level data in the drill down to the region group.
Can anyone please correct my jsfiddle to be working as per this requirement?
Thank you!
In your example, each of points should have a drilldown, while nothing have it, see:
series: [{
name: 'University',
data: [1, 3, 1, 7],
color: colors[0]
}, {
name: 'Internship',
data: [0, 0, 0, 2],
color: colors[1]
}, {
name: 'Employment',
data: [0, 0, 0, 9],
color: colors[2]
}],
should be (for each series!):
data: [{
y: 1,
drilldown: {
name: 'East',
categories: categories1,
data: [0, 1, 0],
pointWidth: 40,
color: colors[0]
}
}, {
y: 3,
drilldown: {
name: 'North',
categories: categories1,
data: [2, 1, 0],
pointWidth: 40,
color: colors[1]
}
}, {
y: 1
...
}]
Related
I'm trying to implement a drill down on a bar chart.
My data series are splitted on 6 categories on the x axis and I have three different series (Social, Cognitive and Language).
I would like to be able to drill down in my series. For example, 'social' is made of 'Family' and 'Personnal'.
My problem is that highchart only wants to drill down into one data serie. In my case I would like the drill down to display serveral data series.
In the fiddle below, I would like the drill down from 'Social' to display the series 'Family' and 'Personnal'. But highchart only display the 'Personnal' serie.
Is there a standard way to do this with Highcharts?
series: [
{
name: 'Social',
type: 'bar',
data: [
{ y: 10, drilldown: 'A' },
{ y: 5, drilldown: 'A' },
{ y: 3, drilldown: 'A' },
{ y: 1, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
],
color: '#EEAA3C',
},
{
name: 'Cognitive',
type: 'bar',
data: [6, 3, 1, 0, 1, 1],
color: '#86BD4A',
},
{
name: 'Language',
type: 'bar',
data: [4, 2, 0, 2, 0, 0],
color: '#E26E3E',
},
],
drilldown: {
series: [
{
name: 'Family',
id: 'A',
type: 'bar',
data: [1, 1, 1, 0, 0, 0],
color: '#F2B553',
},
{
name: 'Personal',
id: 'A',
type: 'bar',
data: [9, 4, 2, 1, 0, 0],
color: '#F8CC87',
},
],
},
https://jsfiddle.net/pacambi/3k4eng7w/
Thanks !
I created highcharts heatmap with drilldown. Drilldown has link on xaxis lable. Could I have link only on yaxis? And remove link on xaxis. Since my drilldown chart is associate to y not x.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
colorAxis: {
min: 0,
stops: [
[0, '#7EAB55'],
[0.5, '#FFFE55'],
[1, '#B02418']
],
},
series: [{
data: [{
x: 0,
y: 0,
value: 0,
drilldown: 'animals'
}, {
x: 0,
y: 1,
value: 1
}, {
x: 1,
y: 0,
value: 2,
drilldown: 'animals'
}, {
x: 1,
y: 1,
value: 1
}],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
drilldown: {
series: [{
id: 'animals',
data: [
[0, 3, 1],
[1, 1, 4],
[2, 4, 3]
]
}]
}
});
This is example in fiddle. Thanks.
https://jsfiddle.net/lundi/jdc4mpk2/
From Sebastian's suggestion, this is the answer.
You can use the chart.inverted feature to achieve the wanted result: jsfiddle.net/BlackLabel/82qapmoe
I am working ReactHigh charts on polar graphs, I want my labels to come in between the sectors of the circle, they are coming on points but i dont want them to come there.
JSfiddle : https://jsfiddle.net/ra73mp0c/12/
Also I want a background color on each of the labels.
Graph as of now :
Desried Outcome :
Please help me .
Config of graph :
const config = {
chart: {
polar: true,
type: 'line',
width: 700,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: null
},
pane: {
size: '80%'
},
xAxis: {
categories: [
'Sales',
'Sales',
'Sales',
'Sales',
'Marketing',
'Development',
'Customer Support',
'Customer Support',
'Customer Support',
'Information Technology'
],
labels: {
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
},
tickmarkPlacement: 'on'
},
yAxis: {
gridLineInterpolation: 'polygon',
min: 0,
tickInterval: 1,
max: 6
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: { enabled: false },
series: [
{
name: 'Allocated Budget',
data: [1, 2, 3, 1, 4, 3, 1, 2, 4, 1],
pointPlacement: 'between'
},
{
name: 'Actual Spending',
data: [2, 4, 2, 1, 3, 4, 2, 2, 1, 4],
pointPlacement: 'between'
}
]
}
Thanks a lot, It would be helpful ig you can edit the fiddle Link https://jsfiddle.net/ra73mp0c/12/
Creating that kind of background for x axis labels is not supported in Highcharts.
As a workaround you can create a phantom series that mimics their look:
{
showInLegend: false,
type: 'polygon',
name: 'Labels background',
data: [
[1, 5],
[2, 5],
[2, 6],
[1, 6]
],
zIndex: -9999
}
labels.distance should be a negative value to make it work.
Demo: https://jsfiddle.net/BlackLabel/63nc1csv/
I'm exploring Highcharts Api and used a stacked grouped bar charts. I came on an idea on changing the bar's look. I wanted it to be a pointed bar. Would it be possible? Thanks in advance!
Image below:
Changing column series shape might be difficult because the logic behind the column series is meant to work with rectangles, so it would require extend/change Highcharts internal code.
Instead, you can use a polygon series. With a little of configuration, you should be able to get the desired effect.
$(function() {
var labels = {
1: 'Apples',
4: 'Bananas'
};
Highcharts.chart('container', {
chart: {
type: 'polygon'
},
xAxis: [{
min: -0.5,
max: 6,
tickPositions: [0, 2, 3, 5],
labels: {
enabled: false
}
}, {
offset: 0,
linkedTo: 0,
tickPositions: [1, 4],
tickLength: 0,
labels: {
formatter: function () {
return labels[this.value];
}
}
}],
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'series 1',
id: 's1',
colorIndex: 0,
data: [
[0, 0],
[0, 25],
[2, 20],
[2, 0]
]
}, {
name: 'series 1',
linkedTo: 's1',
colorIndex: 0,
data: [
[3, 0],
[3, 68],
[5, 63],
[5, 0]
]
}, {
colorIndex: 1,
id: 's2',
name: 'series 2',
data: [
[0, 25],
[0, 50],
[2, 45],
[2, 20]
]
}, {
name: 'series 2',
colorIndex: 1,
linkedTo: 's2',
data: [
[3, 68],
[3, 78],
[5, 73],
[5, 63]
]
}]
});
});
example: http://jsfiddle.net/stfhhn7y/
My series data and column chart look like this.
series data array values are the count which i need to display on the top of bars and series percentwithingroupvalues array data as in the fiddle should be my Y-axis data.
How to acheive this? Below is my data
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
/*Percentage is calculated as
Below values are random
(5)*100/(5+2+3)
*/
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
percentwithingroupvalues:[20,20,20,20,20]
}]
You need to set for each point object { }, instead of value y , see: http://jsfiddle.net/tRKad/3/
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.custom;
}
}
}
},
series: [{
name: 'John',
data: [{
custom: 5,
y: 20
}, {
custom: 3,
y: 15
}, {
custom: 4,
y: 11
}, {
custom: 22,
y: 7
}, {
custom: 33,
y: 2
}],
}]