I have create graph 3 level drilldown and want to show legend of 3rd level follow with color.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -45,
align: "right",
y: 30,
},
type: "category",
tickWidth: 0
},
yAxis: {
title: {
text: 'Total fruit consumption'
}
},
legend: {
enabled: true,
itemStyle: {
fontSize:'10px'
},
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
reversed:true
},
plotOptions: {
series: {
cropThreshold: 1000,
animation: {
duration: 300
},
cursor: 'pointer',
point: {
events: {
click: function () {
if(this.id)
{
alert(this.id);
}
}
}
}
},
column: {
cropThreshold: 1000,
minPointLength: 3,
animation: false,
stacking: 'normal'
}
},
series: [{
index: 0,
name: 'Tippers',
turboThreshold: 0,
cropThreshold: Infinity,
data: [{
name:'01-Feb-2018',
colorByPoint:true,
y:3,
drilldown:'Tippers-1-2-2018'
}]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color: 'black',
fontWeight: 'normal'
},
series: [{
name: '01-Feb-2018',
id: 'Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'psb04221',
y: 1,
drilldown:'psb04221/Tippers-1-2-2018'
},{
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Tippers-1-2-2018'
},]
},{
name: '01-Feb-2018',
id: 'Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: 'rvd910939',
y: 2,
drilldown:'rvd910939/Trucks-1-2-2018'
},{
name: 'sks913031',
y: 1,
drilldown:'sks913031/Trucks-1-2-2018'
},]
},{
name: 'psb04221 / Tippers 1-February-2018',
id: 'psb04221/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-44',
id: '44',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Tippers 1-February-2018',
id: 'rvd910939/Tippers-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-21',
id: '21',
y: 1,
type_legend: 'green',
color:'green'
},{
name: '01-February-2018-25',
id: '25',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-27',
id: '27',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'rvd910939 / Trucks 1-February-2018',
id: 'rvd910939/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-13',
id: '13',
y: 1,
type_legend: 'red',
color:'red'
},{
name: '01-February-2018-26',
id: '26',
y: 1,
type_legend: 'green',
color:'green'
},]
},{
name: 'sks913031 / Trucks 1-February-2018',
id: 'sks913031/Trucks-1-2-2018',
turboThreshold: 0,
cropThreshold: Infinity,
showInLegend: false,
data: [ {
name: '01-February-2018-22',
id: '22',
y: 1,
type_legend: 'yellow',
color:'yellow'
},{
name: '01-February-2018-23',
id: '23',
y: 1,
type_legend: 'green',
color:'green'
},]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
1st drilldown legend show date is correct
2nd drilldown I want to show legend users
3rd drilldown I want to show legend for color filter
Please help me to add legend for show legend filter by color Red , Green and Blue of 3rd drilldown like this image : 3rd Drilldown
I have resolved problem by answer of ppotaczek.
In your example, the third level of drilldown is one series, that is why the legend show only one item. If you want to have multiple legend items on drilldown, you have to have multiple series. You can use drilldown event and addSeriesAsDrilldown method, like in the example below to achieve needed result.
Live demo: http://jsfiddle.net/BlackLabel/amg8234t/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
https://api.highcharts.com/highcharts/chart.events.drilldown
Best regards!
Thank you so much.
Related
In Highcharts, how do I control the gaps between categories?
I've highlighted the area I am talking about in blue below:
I want to make my highchart chart gaps look like this powerpoint version on the left below. The bars in PowerPoint go all the way to the end of the plot area, but highcharts have this big gap.
https://jsfiddle.net/15u0r64s/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Total', 'Male', 'Female', 'Other'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Total',
data: [10, 20, 31, '']
}, {
name: 'Male',
data: [10, 20, 60, 2]
}, {
name: 'Female',
data: [10, 20, 61, '']
}, {
name: 'Other',
data: [10, 20, 65, 4]
}]
});
You need to edit groupPadding and pointPadding properties:
plotOptions: {
bar: {
groupPadding: 0.05,
pointPadding: 0
}
}
Live demo: https://jsfiddle.net/BlackLabel/oqpxmL18/
API Reference:
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.pointPadding
I have a sample highchart and I want to add the five text boxes with different colors at the bottom of the chart.
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Excellent',
data: [5, 3, 4, 1, 2]
}, {
name: 'Poor',
data: [2, 2, 9, 2, 1]
},
{
name: 'Fair',
data: [5, 3, 1, 7, 2]
}, {
name: 'Good',
data: [2, 2, 3, 6, 1]
}, {
name: 'Very good',
data: [3, 4, 8, 2, 5]
} ]
});
You can use the annotations module to add the text boxes:
annotations: [{
labelOptions: {
y: 0,
overflow: 'none',
shape: 'rect'
},
labels: [{
point: {
x: 50,
y: 280
},
backgroundColor: 'red',
text: 'some text'
}, {
point: {
x: 250,
y: 280
},
backgroundColor: 'blue',
text: 'some text'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4h0gp2qz/
API Reference: https://api.highcharts.com/highstock/annotations
I am using highstock and wants to add flags to my graphs.
I have two charts in the same container and are using "onSeries" to add
the flags on the correct chart. However, the flags are always applied to the upper graph eventhough I specify in the "onSeries" parameter in my flags config.
fiddler: https://jsfiddle.net/rick822/mtw0oxxy/
$(function () {
$('#container').highcharts('StockChart', {
chart: {
height: 1800
},
title : {
text : 'AAPL Stock Price'
},
yAxis: [
{
labels: {},
title: {
text: 'test1'
},
height: 100,
opposite: false,
offset: 0
},
{
labels: {},
title: {
text: 'test2'
},
height: 100,
top: 300,
opposite: false,
offset: 0
}
],
series : [{
name : 'AAPL',
data : [[1241136000000,18.18],[1243555200000,19.40],[1246320000000,20.35]],
id: 'test1',
tooltip: {
valueDecimals: 2
}
,
yAxis: 0
},
{
name : 'AAPL',
data : [[1241136000000,18.18],[1243555200000,19.40],[1246320000000,20.35]],
id: 'test2',
tooltip: {
valueDecimals: 2
},
yAxis: 1
},
{
type: 'flags',
data: [{x: 1241136000000, title: "TEST1" }],
onSeries: 'test1',
shape: 'squarepin',
width: 16,
fillColor: 'red'
},
{
type: 'flags',
data: [{x: 1243555200000, title: "TEST2" }],
onSeries: 'test2',
shape: 'squarepin',
width: 16,
fillColor: 'lightgreen'
}
]
});
});
As you have several y-axis you also have to specify the associated y-axis for the flag series, at least when they are not going to be on the index 0 y-axis.
For example (JSFiddle):
{
type: 'flags',
data: [{x: 1241136000000, title: "TEST1" }],
onSeries: 'test1',
shape: 'squarepin',
width: 16,
fillColor: 'red',
yAxis: 0
},
{
type: 'flags',
data: [{x: 1243555200000, title: "TEST2" }],
onSeries: 'test2',
shape: 'squarepin',
width: 16,
fillColor: 'lightgreen',
yAxis: 1
}
I am using highcharts for visualization . I am trying to plot similar kind of chart. I have tried it using multiple y axis and finally ended up with
$(function() {
$('#container').highcharts({
chart: {
borderWidth: 2,
height: 600,
width: 500,
animation: false
},
xAxis: [{
gridLineWidth: 1,
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
gridLineWidth: 1,
gridLineColor: '#E0E0E0',
crosshair: true
}],
yAxis: [{
height: 200,
lineWidth: 1,
offset: 0,
title: {
text: 'power'
}
},
{
top: 300,
height: 200,
lineWidth: 1,
offset: 1,
title: {
text: 'books'
}
}
],
legend: {
title: {
text: 'Stage: ',
style: {
fontStyle: 'italic'
}
},
floating: false,
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
},
plotOptions: {
series: {
borderWidth: 0,
shadow: false
},
column: {
animation: false,
grouping: true
},
line: {
stacking: 'normal'
}
},
series: [{
yAxis: 0,
name: 'Boston',
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
yAxis: 0,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
yAxis: 0,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
yAxis: 0,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}, {
yAxis: 1,
type: 'column',
name: 'Boston',
data: [4000, 3000, 1000, 6000]
}, {
yAxis: 1,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
yAxis: 1,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
yAxis: 1,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
well, solution is to add id and colour to every series item (you can also define global colours instead):
id: "series0",
color: "red",
Then for the second axis series items you need to add linkedTo: <id> parameters. See how it works (colours specified only to 0 and 4th elements just to show that it works):
$(function() {
$('#container').highcharts({
chart: {
borderWidth: 2,
height: 600,
width: 500,
animation: false
},
xAxis: [{
gridLineWidth: 1,
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
gridLineWidth: 1,
gridLineColor: '#E0E0E0',
crosshair: true
}],
yAxis: [{
height: 200,
lineWidth: 1,
offset: 0,
title: {
text: 'power'
}
},
{
top: 300,
height: 200,
lineWidth: 1,
offset: 1,
title: {
text: 'books'
}
}
],
legend: {
title: {
text: 'Stage: ',
style: {
fontStyle: 'italic'
}
},
floating: false,
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100
},
plotOptions: {
series: {
borderWidth: 0,
shadow: false
},
column: {
animation: false,
grouping: true
},
line: {
stacking: 'normal'
}
},
series: [{
id: "series0",
color: "red",
name: 'Boston',
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
id: "series1",
yAxis: 0,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
id: "series2",
yAxis: 0,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
id: "series3",
yAxis: 0,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}, {
id: "series4",
linkedTo: "series0",
color: "red",
yAxis: 1,
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
id: "series5",
linkedTo: "series1",
yAxis: 1,
type: 'column',
data: [1000, 6000, 3000, 2000]
}, {
id: "series6",
linkedTo: "series2",
yAxis: 1,
type: 'column',
data: [3000, 7000, 2000, 8000]
}, {
id: "series7",
linkedTo: "series3",
yAxis: 1,
type: 'column',
data: [6000, 2000, 3000, 4000]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
I have a problem with a highcharts graph, regarding overlapping of multiple axes.
There are 2 types of series, one type column and one type line. I want the line type to be always above the others and never intersect them.
You may see my problem here:
http://jsfiddle.net/99tC7/
Anticipated thank you for any help provided.
$('#container').highcharts({
title: {
text: 'Title',
x: -20 //center
},
xAxis: {
categories: [ "5.11.13", "6.11.13", "7.11.13", "8.11.13", "9.11.13"],
labels: {
rotation: 270
}
},
yAxis: [{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 1"
},
},
{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 2"
},
opposite: true,
max:50,
minPadding:5,
}],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y +'%';
}
}
},
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
}
},
series: [{
name: 'L1',
type: 'column',
color: '#FF0000',
yAxis: 0,
data: [1, 5, 9, 10, 12]
},
{
name: 'L2',
type: 'column',
color: '#00FF00',
yAxis: 0,
data: [16, 16, 106, 12, 11]
},
{
name: 'L3',
yAxis: 1,
data: [38, 24, 37, 29, 37]
}
]
});
You can try to set correct min/max values in both yAxis like here http://jsfiddle.net/99tC7/1/