Highstock, dynamically changing from percent stacking to normal stacking - highcharts

Like the title says, if you have a chart with percent stacking enabled for each series and then try to change to normal stacking using the series.update() method it does not work. It doesn't seem to do anything.
percent to normal example: http://jsfiddle.net/8tbPD/
The reverse does work though.
normal to percent example: http://jsfiddle.net/Tn3n9/
Is there something I'm missing?
Thanks.
$('button').on('click', function() {
for(var index in chart.series) {
chart.series[index].update({stacking:'normal'});
}
});

Unfortunately you need to destroy and create a new chart.

Check this answer on another forum: http://forum.highcharts.com/highstock-usage/dynamic-update-toggle-between-value-and-percentage-t31298/
Basically, add a series with "stacking" but with no data. Then show and hide that series (whose stacking-attribute will affect all other series) using JavaScript, e.g. button.
$(function() {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
showInLegend: false,
stacking: 'percent'
}]
});
// the button action
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function() {
var series = chart.series[5];
if (series.visible) {
series.hide();
$button.html('Percent');
} else {
series.show();
$button.html('Normal');
}
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<button id="button">Normal</button>

Related

Highcharts tooltip pointFormat

Below is my code for a Yii 1 highcharts combination graph which includes a pie chart, bar graph and a line graph. For the line graph I want to display the point after doing a simple division by 10 (ie, if the point value is 60 it should display 6 when cursor placed above that point ). But with my below code it is showing as 60/10 instead of 6. Also, I want this division to be done only for the line graph and not for other two graphs. Please help me solve this issue.
<!---Start Combination Chart ----->
<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>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=<?php echo json_encode(array_values($subjectList));?>;
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: <?php echo json_encode($passedMarkList);?>//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: <?php echo json_encode($failedMarkList);?>
},
{
type: 'line',
tooltip: {
pointFormat: '<span>{point.name}</span>: <b>{point.y}/10</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
},
{
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: <?php echo json_encode($semesterPassStudents);?>,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: <?php echo json_encode($semesterFailStudents);?>,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: <?php echo json_encode($resultUnPublished);?>,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->
Below is my parsed view page source
<!---Start Combination Chart ----->
<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>
<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=["MA101 - CALCULUS","PH100 - ENGG. PHYSICS","BE100 - ENGG. MECHANICS","BE101-05 - INTRODUCTION TO COMPUTING & PROBLEM SOLVING","BE103 - INTRODUCTION TO SUSTAINABLE ENGG.","EC100 - BASICS OF ELECTRONICS ENGG.","PH110 - ENGG. PHYSICS LAB","EC110 - ELECTRONICS ENGG. WORKSHOP","CS110 - COMPUTER SCIENCE WORKSHOP","U100-2 - MICROPROJECT"];
Highcharts.setOptions({
colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container1', {
title: {
text: '<b>Passed/Failed Students</b>',
margin: 110
},
xAxis: {
categories: x,
title: {
text: '<-------- Name Of Subjects ------->'
}
},
yAxis: {
title: {
text: 'Number Of Students'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
series: [{
type: 'column',
name: 'Passed',
data: [60,59,61,62,61,62,62,53,59,62]//[60, 60, 41, 23, 49, 34, 23, 44]
}, {
type: 'column',
name: 'Failed',
data: [2,3,1,0,1,0,0,9,3,0] },{
type: 'line',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}/10 %</b><br/>'
},
name: 'Subject Average GPA',
data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
name: 'Total Number Of Students',
data: [
{
name: 'PASSED',
y: 46,
color: Highcharts.getOptions().colors[0] // Jane's color
},
{
name: 'FAILED',
y: 16,
color: Highcharts.getOptions().colors[1] // John's color
},
{
name: 'Result Not Yet Published',
y: 2,
dataLabels: {
enabled: false,
},
color: Highcharts.getOptions().colors[5] // John's color
},
],
center: [80, -90],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -30,
}
}]
});
</script>
<!---End Combination Chart----->

Highcharts tooltip overlapped by absolute positioned element

For my chart, I would like to position an element absolutely on the chart but under the tooltip in terms of stacking, would this be possible?
Example at: http://jsfiddle.net/0vdnrm26/1/,
The final tooltip on Asia is being overlapped by the hello world div, ideally the tooltip would be over the hello world.
It is happening like this because absolute position of the div, it is nothing to do with highcharts. Highcharts charts are svg elements and are rendered after.
You can use SVGRenderer#text to have same thing.
var chart = new Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function() {
return this.value / 1000;
}
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
}, function(chart) { // on complete
var width = chart.chartWidth - 70;
chart.renderer.text('Hello World', width, 50)
.attr({
//stroke: 'black',
})
.add();
});
.wrapper {
position: relative;
}
/*.some-div {
position: absolute;
top: 50px;
right: 0;
background: pink;
}*/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="wrapper">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>
<!--<div class="some-div">
hello world
</div>-->
</div>
Fiddle demo

Highcharts Bar Chart Zoom not working

If you use a bar chart in Highcharts, the zoom does not seem to work properly.
You can select the area and also the button "Reset zoom" appears. The chart, however, is not zoomed in.
The only code I added to the basic bar example was the zoom type:
chart: {
type: 'bar',
zoomType: 'x'
},
Complete example: http://jsfiddle.net/966off9e/
Is this a bug or a feature? ;-)
I think this is somehow a bug in Highcharts, when you use categorized axis. But a workaround would be using a min for that axis:
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
min: 0
}
Here's the DEMO
Just add 'minRange' to the xAxis: http://jsfiddle.net/mushigh/axy8v9oa/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
zoomType: 'x'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
minRange: 1,
},
yAxis: {
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: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
Another possibility is that the amount of data is bigger than the cropThreshold variable. See this related post.
You can also see the official docs for this variable. Every kind of graphic has this variable with different default values. You should check it out to be sure.

How to stop Highcharts y-Axis bar-chart labels being skipped when height is small?

I'm using Highcharts.js library and when Bar Chart height is small, yAxis labels get skipped. By increasing the size of the bar chart the labels appear again. How do you avoid the labels disappearing.
See this jsfiddle for example - http://jsfiddle.net/VbecE/3/
<script src="http://code.highcharts.com/highcharts.js"></script>
<h3>Why does this skip yaxis labels America and Europe?</h3>
<div id="container" style="min-width: 310px; height: 150px; margin: 0 auto"></div>
<h3>10px bigger and all 5 yaxis labels visible</h3>
<div id="container2" style="min-width: 310px; height: 170px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
crop:false
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
crop:false
}
},
series: {
dataLabels:{
crop:false}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
$(function () {
$('#container2').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
crop:false
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
crop:false
}
},
series: {
dataLabels:{
crop:false}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
You can set step parameter as 1,
labels: {
step:1,
}
http://jsfiddle.net/VbecE/7/

highcharts disable certain labels

i will like the possibility of disabled some labels of my chart
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
name: 'Year 2009',
data: [873, 614, 4054, 732, 34]
}, {
name: 'Year 2010',
data: [573, 1500, 4054, 732, 34]
}, {
name: 'Year 2012',
data: [373, 1380, 4054, 732, 34]
}]
});
});
});
http://jsfiddle.net/tkGFr/
for example, this chart will show all the labels and i will like the possibility of make only enabled 2 or 3 (year 1800, 1900 and 2009) of them but always maintaining the other options (year 2008, 2010 and 2012)
is this possible?
i appreciate your help and advice :D
As I assume, you would like to have enabled "year 1800, 1900 and 2009" in legend and displayed in chart, but other only in legend? If yes you can use visible parameter
{
name: 'Year 1800',
visible: false,
data: [107, 31, 635, 203, 2]
}
Even showInLegend: false; can be used; if want to hide in legends.

Resources