Highcharts tooltip pointFormat - highcharts

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----->

Related

how to highcharts code new for local to set the values for stacked column

how to highcharts code new for local to set the values for stacked columnhow to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column
public options: any = {
title: {
text: 'Sales of petroleum products March, Norway',
align: 'left'
},
xAxis: {
categories: ['Jet fuel', 'Duty-free diesel', 'Petrol', 'Diesel', 'Gas oil']
},
yAxis: {
title: {
text: 'Million liter'
}
},
labels: {
items: [{
html: 'Total liter',
style: {
left: '50px',
top: '18px',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'black'
}
}]
},
plotOptions: {
column: {
stacking: 'percent' // normal or percent
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: [{
type: 'column',
name: '2020',
data: [59, 83, 65, 228, 184]
}, {
type: 'column',
name: '2021',
data: [24, 79, 72, 240, 167]
}, {
type: 'column',
name: '2022',
data: [58, 88, 75, 250, 176]
}, {
type: 'spline',
name: 'Average',
data: [47, 83.33, 70.66, 239.33, 175.66],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
};
public options1: any = {
chart: {
zoomType: 'xy'
},
colors: ['#7cb5ec', '#91e8e1', '#90ed7d'],
title: {
text: 'Something '
},
subtitle: {
text: 'subsomething'
},
xAxis: [{
categories: ['1/1','2/1','3/1','4/1', '5/1', '6/1','7/1','8/1','9/1','10/1','11/1', '12/1', '13/1', '14/1', '15/1']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: 0,
max:100,
title: {
text: 'Percent',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'sample',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
max: 100,
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0],
display:'none'
}
},
opposite: true
}],
tooltip: {
shared: false
},
legend: {
layout: 'vertical',
align: 'center',
x: -0,
verticalAlign: 'top',
y: 400,
floating: true,
// backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [
{
name: 'suff1',
type: 'column',
yAxis: 1,
data: [10, 25, 10,30,80, 20, 25, 10,30,80, 20, 25, 10,30,80],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'suff2',
type: 'column',
yAxis: 1,
tooltip: {
valueSuffix: ' %'
},
data: [20, 50, 30,30,10, 30, 50, 30,30,10, 30, 50, 30,30,10]
}, {
name: 'suff3',
yAxis: 1,
type: 'column',
tooltip: {
valueSuffix: ' %'
},
data: [30,5, 60, 40, 10, 50,25, 60, 40, 10, 50,25, 60, 40, 10]
},
{
name: 'NS',
type: 'spline',
data: [45,55,74,85,81, 45,55,74,85,81, 45,55,74,85,81],
tooltip: {
valueSuffix: '%'
}
}]
};
Highcharts.chart('container-nps', this.options);
import * as Highcharts from 'highcharts';
<div id="container-nps"></div>

How to create an inner circle pie chart in Highcharts

I am using Highcharts pie chart and I would like to have an inner circle in pie chart. However the option to create a inner circle is not available in Highcharts.
I want to create inner circle in my chart as shown in this picture:
Below is my code. I am using highcharts-ng.js.
var budget = 100;
var sectionVal = 56.33;
$scope.highchartsNGPie = {
options: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
enabled: false,
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '98%',
innerRadius: '88%',
backgroundColor: Highcharts.Color('#808080').setOpacity(0.3).get(),
borderWidth: 0
}]
},
plotOptions: {
pie: {
allowPointSelect: false, //to stop animation of section
cursor: 'default',
borderWidth: 0,
showInLegend: false
},
series: {
animation: false,
}
},
},
series: [{
name: 'spent',
colorByPoint: true,
states: {
hover: {
enabled: false
}
},
data: [{
name: 'Spent',
y: sectionVal,
color: '#50B432',
tooltipDisabled: false,
dataLabels: {
style: {
color: 'black'
},
enabled: true,
formatter: function () {
//return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
return this.point.y + "%";
}
},
}, {
y: budget - sectionVal,
sliced: true,
selected: true,
color: '#ffffff',
tooltipDisabled: true,
dataLabels: {
enabled: false
},
}]
}],
title: {
text: 'Your Budget for September',
align: 'top'
},
loading: false
}
<div highchart id="chart1" config="highchartsNGPie"></div>
You can use it using size and innerSize options.
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
innerSize: '50%',
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
<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; max-width: 600px; margin: 0 auto"></div>

Why Highcharts Animation choppy on mobile device?

I'm making a HTML5 hybrid app for android with Highcharts for my dashboard page.
There are 3 charts in this page, and only less than 10 points in each chart.
The init animation looks smoothly on PC browser(include chrome & firefox), but very choppy on my mobile device(Nexus 7 and MSM8916 CPU phone).
Even i set duration to 2000, it's still choppy.
With jQuery 2.1.3 and Hightcharts 4.1.5.
Could someone tell me the reason and how to improve the performance of Highcharts animation on mobile device?
html code below, i use jquery mobile 1.4.5 for UI framework.
<div data-role="page" data-title="总览" id="overall-page">
<div role="main" class="ui-content no-margin">
<div class="border-chart" id="hdgjChart"></div>
<div class="border-chart" id="sbzxlChart"></div>
<div class="border-chart" id="lsgjChart"></div>
</div>
</div>
js code below:
$(document).on("pageshow", "#overall-page", function() {
// Draw first Charts.
$('#hdgjChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'column',
//pinchType: 'xy',
//zoomType: 'xy',
//panning: true
},
title: {
text: '活动告警',
align: 'left',
margin: 0,
style: { "color": "#004488", "fontSize": "16px" }
},
legend: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
labels: {
enabled: false
},
stackLabels: {
style: {
color: "#004488"
},
enabled: true
},
title: {
text: null
},
tickAmount: 8
},
plotOptions: {
column: {
stacking: 'normal',
animation: {
duration: 2000
}
}
},
tooltip: {
headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>'
},
series: [{
name: '数目',
data: [
{
y: 381,
color: "#f00505",
name: "一级告警"
},
{
y: 25,
color: "#f46700",
name: "二级告警"
},
{
y: 652,
color: "#ffcf05",
name: "三级告警"
},
{
y: 72,
color: "#22a5f2",
name: "四级告警"
}]
}]
});
// Draw second chart
$('#sbzxlChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'pie',
spacingBottom: 0
},
title: {
text: '<span style="color:#004488;font-size:16px">设备在线率</span><span style="color:#004488;font-size:12px">--总设备数:78</span>',
align: 'left',
margin: 0
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
align: 'right',
verticalAlign: 'top',
floating: true,
itemDistance: 10,
borderRadius:3,
borderWidth: 1
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.y}个,{point.percentage:.1f} %',
style: {
color: "#004488"
}
},
innerSize: '50%',
point: {
events: {
legendItemClick: function(e) {
e.preventDefaut();
}
}
},
animation: {
duration: 2000
}
}
},
series: [{
name: '数目',
data: [
{
y: 31,
color: "#00ff00",
name: '在线'
},
{
y: 47,
color: "#959595",
name: '中断'
}
],
showInLegend: true
}]
});
// Draw third chart
$('#lsgjChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'areaspline',
spacingBottom: 0,
//pinchType: 'x',
//zoomType: 'x',
//panning: true
},
title: {
text: '<span style="color:#004488;font-size:16px">历史告警数量</span><span style="color:#004488;font-size:12px">--最近7天</span>',
align: 'left',
margin: 7
},
tooltip: {
headerFormat: "",
pointFormat: '{point.y}'
},
legend: {
align: 'right',
verticalAlign: 'top',
floating: true,
borderRadius:3,
borderWidth: 1
},
xAxis: {
gridLineWidth: 1,
tickAmount: 7,
tickInterval: 1
},
yAxis: {
stackLabels: {
enabled: true,
useHTML: true,
y: -12,
formatter: function() {
return '<span style="background-color:#0d61be;color:white;font-weight:normal">' + this.total + '</span>';
}
},
title: {
text: null
},
tickAmount: 7
},
plotOptions: {
areaspline: {
stacking: 'normal',
pointStart: 1,
color: '#0d61be',
events: {
legendItemClick: function(e) {
e.preventDefault();
}
},
animation: {
duration: 2000
}
}
},
series: [{
name: '总告警数',
data: [150, 450, 300, 550, 300, 300, 100]
}]
});
});
When I made a simple highcharts test html page, and run it on mobile chrome browser, it runs smoothly.
But when simple packaged it to hybrid android app, using OS WebView & Crosswalk, It runs choppy still.(intel XDK)
I tested a canvas based js chart lib, Chart.js, It's choppy also when hybrid app.
So, I think it's the problem of VebView or Phonegap.
I'm finding the reason now, and will update the issue when I solved it.
Thanks all.

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/

Highstock, dynamically changing from percent stacking to normal stacking

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>

Resources