I have a Highcharts pie chart on my page, working fine.
What I would like to do is remove the values displayed on mouseover of the pie and instead display the values statically with dataLabels(?).
I am not that good at JS and have no idea where to start.
See image below for explanation.
$(function() {
$('#total').highcharts({
credits: {
enabled: false
},
data: {
table: document.getElementById('datatable_total'),
switchRowsAndColumns: true,
endRow: 1
},
chart: {
type: 'pie'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -20
}
}
});
});
$(function () {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br>{point.y}</br>',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Europe',
y: 50
}, {
name: 'Africa',
y: 25
}, {
name: 'Australia',
y: 18
}, {
name: 'US',
y: 7
}]
}]
});
});
<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; max-width: 600px; margin: 0 auto"></div>
Related
how to draw hh:mm pie chart using highcharts for bellow table
You could try this approach, we get the total amount of time, then create a highcharts chart from the individual points:
const data = [
{
name: 'Line Clear - Line maintenance',
value: '06:29',
color: '#eef441'
},
{
name: 'Incoming Supply Failure (ICF)',
value: '14:44',
color: '#f44242'
},
{
name: '33 KV Line Breakdown',
value: '02:13',
color: '#41f48b'
},
{
name: 'Line Clear - SS maintenance',
value: '00:10',
color: '#4176f4'
},
{
name: 'Momentary Interruptions',
value: '01:11',
color: '#e541f4'
}
];
var totalTimeSeconds = data.reduce((sum,row) => {
return sum + 1.0*moment.duration(row.value).asSeconds();
}, 0.0);
var dataSeries = data.map((row) => {
return {
name: row.name + " (" + row.value +")",
y: moment.duration(row.value).asSeconds() / totalTimeSeconds,
color: row.color
};
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Reason Type'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Reason',
colorByPoint: true,
data: dataSeries
}]
});
Here's a JSFiddle that demonstrates this: Reason-Chart
*Actually i'am generating pie chart for table using table id.
So i added another column as seconds,generated table like bellow image.
The bellow Script is used to generate pie chart
<div class="row" style="margin-left: 0px;text-align: center;">
<div id="durationGraphcontainer" style="height: 310px; margin: 0 auto;margin-bottom: 10px;width: 100%"></div>
</div>
// Duration Graph
Highcharts.chart('durationGraphcontainer', {
data: {
table: 'durationGraph'
},
chart: {
type: 'pie'
},
title: {
text : 'Inetrruption Reason Type Graph'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Million Units'
},
stackLabels: {
enabled: true,
align: 'center'
}
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left',
layout: 'vertical',
y: 100,
labelFormatter: function() {
return this.name + " - " + this.percentage.toFixed(2) + "%";
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>',
formatter: function () {
return this.point.name.toUpperCase();
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false,
format: '{point.percentage:.2f} %',
} ,
innerSize: 100,
depth: 45,
showInLegend: true
},
},
series:[
{
type: 'pie',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return this.point.y.toFixed(2);
}
}
},{point: {
events: {
click: function() {
}
}
}
}],
credits: {
enabled: false
}
});*
I have the following code to generate a pie chart. I am calling an external json file to generate the pie chart.
For some reason. it not generating the pie chart. what am i missing or doing wrong?
Here is my code below:
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
// options.xAxis.categories = json[0]['data'];
// options.series[0] = json[1];
// options.series[1] = json[2];
// chart = new Highcharts.Chart(options);
// debugger
console.log(json);
alert(json);
options.series[0].data = json
chart = new Highcharts.Chart(options);
});
}, 0)
</script>
JSON - pie.json
[{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
Here we are.The pie json data need a transfrom as I show you below:
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{type:"pie"}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
console.log(json);
alert(json);
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
}, 0);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body></html>
pie..json
[{
"name": "Microsoft Internet Explorer",
"y": 56.33
}, {
"name": "Chrome",
"y": 24.03,
"sliced": true,
"selected": true
}, {
"name":"Firefox",
"y": 10.38
}, {
"name":"Safari",
"y": 4.77
}, {
"name":"Opera",
"y": 0.91
}, {
"name": "Proprietary or Undetectable",
"y": 0.2
}]
I am using High chart to show charts in my website. for example:
$(document).ready(function(){
//Gender
var Result=[{"Name":"خانم","Value":59,"Percent":3,"Total":0,"Hours":null},{"Name":"آقای","Value":1708,"Percent":97,"Total":0,"Hours":null}];
var data =[] ;
for (var i in Result) {
var serie = new Array(Result[i].Name, Result[i].Value);
var data22 = [];
data22.push(Result[i].Value);
var obj = {
name: Result[i].Name,
y: Result[i].Value
}
data.push(obj);
}
FixedPieChart(data, "Gender", "بازدید کنندگان به تفکیک جنسیت", '1767', 50);
});
function FixedPieChart(series, elementId, title, total, marginBottom) {
var chart = Highcharts.chart(elementId,
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
style: {
fontFamily: 'B yekan',
fontSize: '14px',
color: 'black'
}
},
title: {
text: ""
},
tooltip: {
//pointFormat: '<span style="color:black;background-color:white"><span style="direction:rtl"><b>{point.percentage:.1f}%</b><br/>{series.name}</span></span>',
//useHTML: true,
//backgroundColor: '#ffffff',
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
allowOverlap: true,
format: '<span style="dirsction:rtl"><b>{point.name}</b>:{point.percentage:.1f}</span>',
style: {
color: 'black'
},
useHTML: true
},
showInLegend: true,
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function () {
return '<div style="text-align: right; direction:rtl">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
// labelFormatter: function() {
// return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.percentage.toFixed(1)+ '%</div>';
//}
},
series: [{
name: ' از ' + total + ' نفر',
colorByPoint: true,
data: series
}],
credits: {
enabled: false
},
});
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body bg-light dark" id="Gender" style="direction: ltr !important;margin: 0 auto"></div>
in this example I rendered a pie chart. every thing is fine in rendering chart on the page. but after exporting labels are messed up. and labels are not showing correctly.
internationalization in highcharts. See demo at last.
There is use of useHTML: Highcharts.hasBidiBug, for RTL language.
I have disabled dataLables (tried but not working with useHTML: Highcharts.hasBidiBug,).
Hope this helps
$(document).ready(function() {
//Gender
var Result = [{
"Name": "خانم",
"Value": 59,
"Percent": 3,
"Total": 0,
"Hours": null
}, {
"Name": "آقای",
"Value": 1708,
"Percent": 97,
"Total": 0,
"Hours": null
}];
var data = [];
for (var i in Result) {
var serie = new Array(Result[i].Name, Result[i].Value);
var data22 = [];
data22.push(Result[i].Value);
var obj = {
name: Result[i].Name,
y: Result[i].Value
}
data.push(obj);
}
FixedPieChart(data, "Gender", "بازدید کنندگان به تفکیک جنسیت", '1767', 50);
});
function FixedPieChart(series, elementId, title, total, marginBottom) {
var chart = Highcharts.chart(elementId, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
style: {
fontFamily: 'B yekan',
fontSize: '14px',
color: 'black'
}
},
title: {
text: ""
},
tooltip: {
//pointFormat: '<span style="color:black;background-color:white"><span style="direction:rtl"><b>{point.percentage:.1f}%</b><br/>{series.name}</span></span>',
//useHTML: true,
//backgroundColor: '#ffffff',
},
exporting: {
allowHTML: true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
allowOverlap: true,
format: '<span style="dirsction:rtl"><b>{point.name}</b>:{point.percentage:.1f}</span>',
style: {
color: 'black'
},
useHTML: true
},
showInLegend: true,
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function() {
return '<div style="text-align: right; direction:rtl">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
// labelFormatter: function() {
// return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.percentage.toFixed(1)+ '%</div>';
//}
},
series: [{
name: ' از ' + total + ' نفر',
colorByPoint: true,
data: series
}],
credits: {
enabled: false
},
});
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body bg-light dark" id="Gender" style="direction: ltr !important;margin: 0 auto"></div>
Update
Just add exporting.allowHTML in option in chart
exporting: {
allowHTML: true
},
I want to built multiple pie-charts with responsive. Based on the width the pie-charts position is not changing. I am using the below code and i have attached the screenshot. Please refer the screenshot.
<div id="container" style="height:600px"></div>
<script type="text/javascript">
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Candidate percentage per party',
align: 'center'
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'middle'
},
plotOptions: {
pie: {
size: '200'
}
},
labels: {
style: {
color: '#3E576F',
fontSize: '14px'
},
items: [
{
html:"Whales unite",
style:{left:"180",top:"20"}
},
{
html:"Star Wars (Dark Side)",
style:{left:550,top:"20"}
},
{
html:"South African GOATS",
style:{left:151,top:290}
}
],
},
tooltip: {
formatter: function () {
return this.key + ': ' + this.y + ' (' + Math.round(this.percentage) + '%)';
}
},
series:[
{
data:[
{name:"Jabu Nkosi",y:24},
{name:"Ryan Ryan",y:24},
{name:"Ryan Bouwer",y:24},
{name:"Marco Engels",y:24},
{name:"Adrian Nair",y:24},
{name:"Mateen Waja",y:24},
{name:"Zach Pillay",y:24}
],
name:"Whales unite",
center:[200,150],
size:150
},
{
data:[
{name:"Rui Gomes da silva",y:5}
],
name:"Star Wars (Dark Side)",
center:[200,400],
size:150
},
{
data:[
{name:"Keegan fan Numba 1 fan",y:7},
{name:"Laeekah fan Numba 1 fan",y:7}
],
name:"South African GOATS",
center:[600,150],
size:150
}
];
});
</script>
Need help removing that grey line coming out of the chart in the grey part of the chart.
http://jsfiddle.net/Y2e5p/
// Build the chart
$('#' + div_id).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: title
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer'
}
},
series: [{
type: 'pie',
name: title,
size: '60%',
innerSize: '40%',
data: [{
y: number,
name: title,
color: color,
dataLabels: {
enabled: true,
color: '#000000',
inside: true,
formatter: function () {
return Math.floor(Number(this.percentage)) + ' %';
}
}
}, {
y: (100 - number),
name: " ",
color: '#AAAAAA',
dataLabels: {
enabled: true
}
}]
}]
});
You can set datalabels for point and in formatter recognise if datalabels should be or not
http://jsfiddle.net/Y2e5p/2/
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled:true,
formatter: function () {
if(this.point.dataLabels.enabled)
return Math.floor(Number(this.percentage)) + ' %';
else
return null;
}
}
}
},