I am trying to create a simple pie chart. But it does not seems to be rendered. I am trying with the codes at the below link.
Seems to be have some problem with the tooltip- pointFormat and plotOptions- format codes. It is the bold tag that is causing the problem.
Can anyone advise me? Thanks!
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
}
Related
I'am trying to use Pie chart of highchart with Codeigniter for the first time. I can't display the graph with my codes below. I can't pass the json to the graph data to display the pie chart.
Any help is greatly appreciated.
Thanks
The query result in json format shows like this :
[{"sexo":"Feminino","total":"4"},{"sexo":"Masculino","total":"2"}]
Controller
public function charCont()
{
$query = $this->model_admin->getPieChat();
$data['query']=json_encode($query);
$this->load->view('chart',$data);
}
View
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Test'
},
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: 'Brands',
colorByPoint: true,
data:<?=$query?>
}]
});
You need preprocess your data to the format required by Highcharts:
var data = [{
"sexo": "Feminino",
"total": "4"
}, {
"sexo": "Masculino",
"total": "2"
}];
data = data.map(function(obj) {
return {
name: obj.sexo,
y: Number(obj.total)
}
});
Highcharts.chart('container', {
...,
series: [{
...
data: data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/yfLovx8b/
API Reference: https://api.highcharts.com/highcharts/series.pie.data
Currently I am working on a feature layer of arcgis API for JavaScript. I want to show the graph with respect to my layers. Is it possible? If yes, then how can I add highchart on my map?
Here is the graph, which I want to show on my arcgis map:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Fiber Position in BTK'
},
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: 'Brands',
colorByPoint: true,
data: [{
name: 'Arial',
y: 61.41
}, {
name: 'Burried',
y: 11.84
}, {
name: 'Other',
y: 10.85
}]
}]
});
My chart was ok, I don't know what happened that the series name disappeared!
Maybe highcharts last updates need another options, or rtl causes problems.
My code: fiddle
What am I missing here?
$(function() {
$(document).ready(function() {
Highcharts.chart('user_info_46', {
chart: {
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: '',
useHTML: Highcharts.hasBidiBug,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
useHTML: true,
align: 'right',
rtl: true,
},
tooltip: {
useHTML: true,
align: 'right',
},
credits: {
enabled: false
},
series: [{
name: 'تعداد',
colorByPoint: true,
data: [{
name: 'آقا',
y: 7,
color: 'cornsilk'
}, {
name: 'خانم',
y: 2,
color: 'green'
}]
}]
});
});
});
I'm using highchart in my web site. I wanna use thousand seperator in tooltip.
Here's the code:
divChart.highcharts({
lang: {
thousandsSep: ','
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<div style="direction:rtl; text-align:center; font-size:16px;">{point.key}</div><table >',
pointFormat: '<tr><td style="text-align: center;color:{series.color};width:100px;"><b style="margin:4px;">{point.y:,.0f}</b></td></tr>',
footerFormat: '</table>'
},
series: temp
});
But it's not working.
And also I wanna display pie chart labels in rtl direction.
Thanks for answering.
You can use a tooltip formatter and inside use a Highcharts.numberFormat
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
return '<div style="direction:rtl; text-align:center; font-size:16px;">'+this.key+'</div><table><tr><td style="text-align: center;color:'+this.series.color+';width:100px;"><b style="margin:4px;">'+Highcharts.numberFormat(this.y,0,'.',',')+'</b></td></tr></table>';
}
},
Example:
- http://jsfiddle.net/bd1hvj1y/
everything is in the title, I really don't know how I can change the legend's size of my pie.
The code to render it is:
<script type="text/javascript">
$(function () {
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Title aligned left',
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
},
plotOptions: {
pie: {
enableMouseTracking: false,
shadow: false,
animation: false,
allowPointSelect: true,
cursor: 'pointer',
verticalAlign: String,
dataLabels: {
enabled: true,
color: "#2B0057",
connectorColor: '#2B0057',
}
}
},
});
Does anyone know Highcharts and have a solution ? Thanks
The overall "size" of the legend is a combination of many factors (itemDistance, margins, itemMargins, explicit width etc..).
I'm guessing what you really care about though is the text size. Use legend.itemStyle for that:
legend: {
itemStyle: {
fontSize: '20pt'
}
},