I'm using HighCharts to display the death rate. Comparison of death between Male and Female deaths with respect to age is already done and displayed.
Issue I'm facing is the values in y-axis of chart. Y-axis in the chart is the horizontal one. I want it to display values like ...,5,4,3,2,1,0,1,2,3,4,5,...
var categories = [
'0-10', '11-20', '21-30', '31-40',
'40-50', '50-60', '60-70', '70-80', '80-90',
'90+'
];
Highcharts.chart('male-female', {
chart: { type: 'bar' },
title: { text: 'Male Female Death Rate' },
xAxis: [{
categories: categories,
reversed: false,
labels: { step: 1 },
accessibility: { description: 'Age (male)' }
},
{ // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: { step: 1 },
accessibility: { description: 'Age (female)' }
}],
plotOptions: {
series: { stacking: 'normal' }
},
series: [
{
name: 'Male',
data: [ 0, -2, -1, 0, -2, -2, -1, -4, -6, -3 ]
},
{
name: 'Female',
data: [ 2, 2, 2, 2, 2, 9, 3, 1, 9, 4 ]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="male-female"></div>
</figure>
Another solution which you can implement is a creating an array with wanted ticks and use the yAxis.tickPositions feature to apply it.
Demo: https://jsfiddle.net/BlackLabel/mb5v2w1u/
code:
var ticks = [];
for(let i = -10; i <=10; i++){
ticks.push(i)
}
API: https://api.highcharts.com/highcharts/yAxis.tickPositions
You should use Math.abs() in your label formatter to get the absolute value.
Your yAxis must be set to :
yAxis: {
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
}
You can use the same idea for the tooltip by using the formatter function.
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1);
}
}
var categories = [
'0-10', '11-20', '21-30', '31-40',
'40-50', '50-60', '60-70', '70-80', '80-90',
'90+'
];
Highcharts.chart('male-female', {
chart: {
type: 'bar'
},
title: {
text: 'Male Female Death Rate'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
},
accessibility: {
description: 'Age (male)'
}
},
{ // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
},
accessibility: {
description: 'Age (female)'
}
}
],
yAxis: {
labels: {
formatter: function() {
return Math.abs(this.value);
}
},
tickInterval: 1
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1);
}
},
series: [{
name: 'Male',
data: [0, -2, -1, 0, -2, -2, -1, -4, -6, -3]
},
{
name: 'Female',
data: [2, 2, 2, 2, 2, 9, 3, 1, 9, 4]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="male-female"></div>
</figure>
Try using yAxis.labels.formatter and Math.abs()
https://api.highcharts.com/highstock/yAxis.labels.formatter
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
},
var categories = [
'0-10', '11-20', '21-30', '31-40',
'40-50', '50-60', '60-70', '70-80', '80-90',
'90+'
];
Highcharts.chart('male-female', {
chart: {
type: 'bar'
},
title: {
text: 'Male Female Death Rate'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
},
accessibility: {
description: 'Age (male)'
}
},
{ // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
},
accessibility: {
description: 'Age (female)'
}
}
],
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Male',
data: [0, -2, -1, 0, -2, -2, -1, -4, -6, -3]
},
{
name: 'Female',
data: [2, 2, 2, 2, 2, 9, 3, 1, 9, 4]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="male-female"></div>
</figure>
Related
I'm trying to create a stacked column chart in highchart, with the x-axis labels being SVG-images as shown on this image:
I've gotten it to work with single data points per label (ie non-stacked data), but as soon I change the input data to an array, the data stops rendering.
This "works":
https://jsfiddle.net/jakobhl/krx4e5pm/2/
var dataName = function(imgSrc) {
return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};
var data2016 = [
[11, dataName("https://image.flaticon.com/icons/svg/197/197571.svg")],
[11, dataName("https://image.flaticon.com/icons/svg/197/197408.svg")],
[11, dataName("https://image.flaticon.com/icons/svg/197/197375.svg")],
[14, dataName("https://image.flaticon.com/icons/svg/197/197374.svg")],
[12, dataName("https://image.flaticon.com/icons/svg/197/197484.svg")],
];
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
xAxis: {
tickmarkPlacement: 'on',
lineWidth: 0,
type: 'category',
labels: {
useHTML: true,
align: 'center'
}
},
series: [{
keys: ['y', 'name'],
data: data2016,
}]
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
This does not:
https://jsfiddle.net/jakobhl/2rfa645x/3/
var dataName = function(imgSrc) {
return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};
var data2016 = [
[[11, 15], dataName("https://image.flaticon.com/icons/svg/197/197571.svg")],
[[12, 15], dataName("https://image.flaticon.com/icons/svg/197/197408.svg")],
[[13, 15], dataName("https://image.flaticon.com/icons/svg/197/197375.svg")],
[[41, 15], dataName("https://image.flaticon.com/icons/svg/197/197374.svg")],
[[11, 15], dataName("https://image.flaticon.com/icons/svg/197/197484.svg")],
];
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
xAxis: {
tickmarkPlacement: 'on',
lineWidth: 0,
type: 'category',
labels: {
useHTML: true,
align: 'center'
}
},
series: [{
keys: ['y', 'name'],
data: data2016,
}]
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
How can I get the data to stack per country while still using SVGs as labels?
Thanks to the jsfiddle user BlackLabel for inspiration.
You can add another value, but you need to adapt the data format required by Highcharts. If the new value is x, just do it as below:
var data2016 = [
[
11, 15, dataName("https://image.flaticon.com/icons/svg/197/197571.svg")
],
...
];
Highcharts.chart('container', {
...,
series: [{
keys: ['y', 'x', 'name'],
data: data2016
}]
});
Live demo: https://jsfiddle.net/BlackLabel/vubjn8od/
API Reference: https://api.highcharts.com/highcharts/series.column.keys
I never found out why the original solution didn't work, but a working solution was to use categories instead of series:
https://jsfiddle.net/jakobhl/L3hzeqpv/1/
var dataName = function(imgSrc) {
return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
labels: {
useHTML: true,
align: 'center'
},
categories: [dataName("https://image.flaticon.com/icons/svg/197/197571.svg"), dataName("https://image.flaticon.com/icons/svg/197/197408.svg"), dataName("https://image.flaticon.com/icons/svg/197/197375.svg"), dataName("https://image.flaticon.com/icons/svg/197/197374.svg"), dataName("https://image.flaticon.com/icons/svg/197/197484.svg")]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
I'm trying to pass a secondary variable that's located in each point of my series' data-set. I've managed to that so far but when I try to hover on another data point on the chart, the same data gets printed for all points instead of showing the correct data for that specific point.
I've tried a variety of solutions and I would like to stick to this one, however I have this small hurdle which I can't seem to get over.
Here's a jsFiddle to show the problem I'm encountering: https://jsfiddle.net/Flik1/dfn51akc/47/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.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; max-width: 800px; height: 400px; margin: 0 auto"></div>
I believe its a problem with this specific line of code as its displaying the first 'tt' variable from each series.
this.points[index].series.userOptions.data[0].tt
The expected outcome would be 1 and 5 for column 1, 2 and 6 for column 2, 3 and 7 for column 3 and 4 and 8 for column 4.
Try this.points[index].point.options.tt
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.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; max-width: 800px; height: 400px; margin: 0 auto"></div>
I have a file .json and I want get only the last 10 objects from this json file using graph hightcharts.
My problem is that script is getting full objects from array, and I want only get the last 10 objects...
Fixed.
My code is this:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<script>
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
function (data) {
var currentValue = 0.9345;
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
},
plotLines: [{
value: currentValue,
color: 'green',
dashStyle: 'Dot',
width: 1,
label: {
text: currentValue,
textAlign: 'left',
x: -45
}
}]
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
}
);
</script>
Will be great if anyone can help me :)
Well it's quite simple, to get only the last 10 items of your json array, you can filter it, based on index, using Array.filter() method like this:
var last10 = data.filter(function(el, index) {
return index >= data.length - 10;
});
You just need to filter items that has the last 10 indexes, using index >= data.length - 10.
Demo:
In your situation you just need to filter the data array and pass the new filtered array to the chart:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>
<script>
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
function(data) {
var last10 = data.filter(function(el, index) {
return index >= data.length - 10;
});
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: last10
}]
});
}
);
</script>
I drew a drilldown chart and I don't know how to change both x-Axis and y-Axis title after clicking the bars and go to second chart. Also how to change to default title after clicking drillUp button and go back to first chart.
For example, I want my first chart's x-Axis title to be "Percentage Arange" and y-Axis title to be "Number of Schools". And second chart's x-Axis title to be "School Name" and yAxis title to be "Percentage".
I searched for some related code. There is one about how to change the title of the drilldown chart:
var defaultTitle = "Basic drilldown";
var drilldownTitle = "More about ";
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle + e.point.name });
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
}
}
},
title: {
text: defaultTitle
},
// ... more options});
However, i don't know how to use for my case.
Here is the code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category',
title: {
enabled: true,
text: "Percentage Range"
}
},
yAix: {
title: {
enabled: true,
text: "Number of Schools"
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
grouping: false,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
pointPadding: 0,
data: [{
name: '100-70%',
y: 5,
drilldown: '100-70%'
}]
}, {
name: 'Things',
colorByPoint: true,
pointPadding: 0.1,
data: [{
name: '70-30%',
y: 2,
drilldown: '70-30%'
}]
}, {
name: 'Things',
colorByPoint: true,
pointPadding: 0.3,
data: [{
name: '30-0%',
y: 4,
drilldown: '30-0%'
}]
}],
drilldown: {
series: [{
id: '100-70%',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: '70-30%',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: '30-0%',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
Have a look through the docs Axis.setTitle
var defaultTitleXAxis = "Percentage Range";
var defaultTitleYAxis = "Number of Schools";
var drilldownTitleXAxis = "School Name";
var drilldownTitleYAxis = "Percentage";
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
this.xAxis[0].setTitle({ text: drilldownTitleXAxis });
this.yAxis[0].setTitle({ text: drilldownTitleYAxis });
},
drillup: function(e) {
this.xAxis[0].setTitle({ text: defaultTitleXAxis });
this.yAxis[0].setTitle({ text: defaultTitleYAxis });
}
}
},
//....... remaining code
})
Fiddle demo
I have to set dynamic text colors based on some condition for legend , In below picture there is some legends like "New" , "Impact Assessment", "Stackholder Review" etc. So all legends had associated with stacks like first 4 associated with X entity and rest associated with Y entity. For X entity I need to change text color in Green and for Y Red Color.
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'bottom', borderWidth: 0, enabled: true,
x: -2, y: 7,
symbolWidth: 4, symbolHeight: 4,
itemStyle: {
'cursor': 'default',
fontSize: '10px',
color: 'Red'
}
},
series: formatChartData(ctrl.TeamData)
});
**color : "Defect" ? 'Red' : 'Green'**
Above Statement is fine and giving the correct color of legends but here "Defect" is static value , I need it take from dynamic value?
Problem I am not able to set dynamic value.
Solution
legend: {
labelFormatter: function () {
var color = this.options.stack == 'Male' ? '#AB1133' : '#02A202';
return '<span style="color:' + color + '">' + this.name + '</span>';
}
}
Above solution also working
As discussed check answer below .
I am using chart events load function to modify legend text color
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
var seriesData = this.series;
for (var i = 0; i < seriesData.length; i++) {
//checks the stack type
if (seriesData[i].options.stack == 'male') {
/*update the legend fonts*/
this.legend.allItems[i].legendItem.css({
color: 'red',
fill: 'red',
});
}
if (seriesData[i].options.stack == 'female') {
this.legend.allItems[i].legendItem.css({
color: 'green',
fill: 'green',
});
}
}
}
}
},
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: 'red'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male',
//color: 'red'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female',
//color: 'green',
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female',
//color: 'green'
}]
});
<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>
update
Able to disable font color change onmouseover and onmouseout.
onclick functionality if removed, then font color doesn't change and vice-versa
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
var seriesData = this.series;
for (var i = 0; i < seriesData.length; i++) {
if (seriesData[i].options.stack == 'male') { //checks the stack
/*update the legend fonts*/
this.legend.allItems[i].legendItem.css({
color: 'red',
fill: 'red',
});
}
if (seriesData[i].options.stack == 'female') {
this.legend.allItems[i].legendItem.css({
color: 'green',
fill: 'green',
});
}
}
}
}
},
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: 'red'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male',
//color: 'red'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female',
//color: 'green',
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female',
//color: 'green'
}]
}, function(chart) {
$.each(chart.series, function(i, series) {
/* comment onclick. for onclick functionality*/
series.legendGroup.element.onmouseover = null;
series.legendGroup.element.onmouseout = null;
series.legendGroup.element.onclick = null;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>