I am trying to drilled down on grouped & stacked column chart. I have two group and technically 4 stack in my chart. I want to do drill down on each stack.
Here is my grouped & stacked column chart:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ["1/5", "2/5", "3/5", "5/5"]
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [
{
id: 'g1',
color: 'blue',
name: "group1",
data: [1, 2, 3, 4],
stack: "move"
},
{
linkedTo: 'g1',
color: 'blue',
name: "group1",
data: [5, 6, 7, 8],
stack: "delete"
},
{
id: 'g2',
color: 'green',
name: "group2",
data: [9, 10, 11, 12],
stack: "move"
},
{
linkedTo: 'g2',
color: 'green',
name: "group2",
data: [13, 14, 15, 16],
stack: "delete"
},
{
id: 'g3',
color: 'red',
name: "group3",
data: [17, 18, 19, 20],
stack: "move"
},
{
linkedTo: 'g3',
color: 'red',
name: "group3",
data: [21, 22, 23, 24],
stack: "delete"
},
{
id: 'g4',
color: 'yellow',
name: "group3",
data: [17, 18, 19, 20],
stack: "move"
},
{
linkedTo: 'g4',
color: 'yellow',
name: "group3",
data: [21, 22, 23, 24],
stack: "delete"
}
]
});
});
</script>
</body>
</html>
But can't understand how to make it drill down. I want to show fixed placement column on drill down like this:
You need to add a drilldown property to points. To add multiple series on drilldown use custom drilldown concept:
series: [{
...,
data: [{
y: 1,
drilldown: true
}, {
y: 2,
drilldown: true
}, ...],
drilldown: true
}, ... ]
Live demo: http://jsfiddle.net/BlackLabel/5a2orf4t/
Docs: https://www.highcharts.com/docs/chart-concepts/drilldown
Similar questions:
Drilldown for grouped column chart in highcharts
https://www.highcharts.com/forum/viewtopic.php?t=34240
Related
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 currently have a legend like Joe and John. I am needing to have a legend on Male and Female as well. How to add male and female legend as well to this. kindly help me out.
This is the JSFiddle of the code which I have tried so far.
Have also created a runnable snippet below if it would be of any help.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
color: "#1f77ac",
id: 'John'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male',
color: "#098ebb",
id: 'Joe'
}, {
name: 'John',
data: [2, 5, 6, 2, 1],
stack: 'female',
linkedTo: 'John',
color: "#1f77ac"
}, {
name: 'Joe',
data: [3, 2, 4, 4, 3],
stack: 'female',
linkedTo: 'Joe',
color: "#098ebb",
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You can add empty series with names: male and female. To handle the click event use legendItemClick function:
series: [..., {
name: 'male',
events: {
legendItemClick: function() {
// hide some series
}
}
}, {
name: 'female',
events: {
legendItemClick: function() {
// hide some series
}
}
}]
Live demo: https://jsfiddle.net/BlackLabel/6x52kzqd/
API Reference: https://api.highcharts.com/highcharts/series.line.events.legendItemClick
How do I manipulate the x-axis style on a drilled down chart in Highcharts?
For instance, given the following drilldown chart, how do I hide the x-axis labels in the drilled down version of the chart (that appears when you click one of the columns)?
In general, it seems like there are are not a lot of ways to control the layout of the drilled down chart, is that correct?
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Drilldown mechanism in Highcharts is responsible only for handling series, but it launches drilldown and dillup events which can be used for applying updates:
chart: {
type: 'column',
events: {
drilldown: function() {
this.xAxis[0].update({
labels: {
enabled: false
}
});
},
drillup: function() {
this.xAxis[0].update({
labels: {
enabled: true
}
}, false);
}
}
}
Live demo: http://jsfiddle.net/kkulig/11qhaffe/
API references:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/highcharts/chart.events.drillup
I am using Highcharts stacked bar chart, but not getting the lines at the end of values as it is in below image, can someone help me on this using Highcharts in built API or methods.
http://i.stack.imgur.com/y3AVm.png
create image and change the sun.png in js code.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'bar',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'bar',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'bar',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
data: [9, 8, 9, 19, 10],
lineWidth: 0,
enableMouseTracking: false,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I'm trying to plot a chart using highcharts that looks like this. Could somebody please provide a simple example.
I've tried this:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Positioning Today'
},
subtitle: {
text: 'XXX XXX'
},
xAxis: {
title: {
enabled: true,
text: 'Compliance'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Category'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Acme',
color: 'rgba(223, 83, 83, .5)',
data: [[3, 4], [3, 5], [4, 2], [3, 2]]
}, {
name: 'Competitive Landscape',
color: 'rgba(119, 152, 191, .5)',
data: [[4, 3], [5, 3], [2, 4], [2, 3]]
}]
});
});
http://jsfiddle.net/u6gbd6bx/3/
However, I'm struggling to get the grid and labels on the Y axis.
To get the categories on the Y axis, you need to specify the categories in the axis properties:
http://api.highcharts.com/highcharts#yAxis.categories
To get the grid, you can specify a width and a color for the gridlines for each axis:
http://api.highcharts.com/highcharts#yAxis.gridLineColor
http://api.highcharts.com/highcharts#yAxis.gridLineWidth
Note that grid lines on a chart are very often a distraction from the data - make them subtle if they are truly necessary.
To line the grid lines up with the categories, you can use the tickmarkPlacement property:
http://api.highcharts.com/highcharts#yAxis.tickmarkPlacement
And lastly, to get your data to line up correctly with your categories, you need to provide the category array index as the y value.
So, if your first category is "Support", you provide an x value of 0 for any data point in the Support category, etc.
Note also, that by default y axis categories run from bottom to top - if you want them to run from top to bottom, you can set reversed: true on your y axis.
Example:
http://jsfiddle.net/jlbriggs/6a5jdvyy/
Check the following example: http://jsfiddle.net/mushigh/qr815f25/2/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Positioning Today'
},
subtitle: {
text: 'XXX XXX'
},
xAxis: {
title: {
enabled: true,
text: 'Compliance'
},
gridLineWidth: 2,
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Category'
},
categories: ['', 'Support', 'Compliance', 'Risk', 'Fast', 'Easy to Get Started'],
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
y: 15
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Acme',
color: 'rgba(223, 83, 83, .5)',
data: [
[3, 4],
[3, 5],
[4, 2],
[3, 2]
]
}, {
name: 'Competitive Landscape',
color: 'rgba(119, 152, 191, .5)',
data: [
[4, 3],
[5, 3],
[2, 4],
[2, 3]
]
}]
});
});