Develop Reference

How to disable pointers in pie chart in highcharts

Pie Chart in highcharts, How to disable the line pointing outside pie-chart
pie chart example
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
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: '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
}]
}]
});
<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>
fiddle

By looking at the Highcharts API you can find the answer to your question, specifically you want plotOptions.pie.dataLabels.connectorWidth.
There is even a pre made example there for exactly what you are asking: jsfiddle example.
Where they have added connectorWidth: 0
plotOptions: {
pie: {
dataLabels: {
connectorWidth: 0
}
}
}

One of the option is to disable the label. check settings below:
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
Or in order to achieve no connectors use code below. distance:0 will solve the purpose
<pre>
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
distance:0,
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},

how to display 2 same highcharts without duplicate the code

I have 2 div of same content, I want to display the same pie charts inside the 2 div, however just the first one is showing, I know the idea of duplicate the js code and make the id like #container1, #container2, but is there a way to avoid code duplication.
Thank you.
Here is the js:
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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,
data: [{
name: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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,
data: [{
name: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
});
});
And HTML :
<div id='container' style="margin-top:300px">pie1</div>
<div id='container' style="margin-top:500px">pie2</div>

You can define the Highchart configuration object once and use it multiple times, like this:
$(document).ready(function () {
// Using classes to select multiple containers
var $containers = $(".container");
// You just set the configuration object once
var chartConfig = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
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,
data: [{
name: 'Unused',
y: 40,
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: 60,
color: '#ff7900',
selected: true
}]
}]
};
// And then for every container init Hightchart with the same object
$containers.each(function() {
$(this).highcharts(chartConfig);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container1" class="container">pie1</div>
<div id="container2" class="container">pie2</div>

HighCharts : 3D Pie Chart Not Displaying

Below is my code:
exec_dashboard_load_chart('exec_dashboard_gender_chart',response);
/**
* A function that loads a chart.
*/
function exec_dashboard_load_chart(id , data){
var myChart = Highcharts.chart(id, {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: data
});
}
The data variable contains the value below:
Here is my fiddle.
Why does my 3d chart doesnt display? I have found no error. I think there's something wrong with my data. Can someone point me, where am I missing?

Check out this Working Fiddle
function exec_dashboard_load_chart(id , data){
var myChart = Highcharts.chart(id, {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
data: data.data
}]
});
}

Pie chart with laravel and js

I am facing a problem to show data from database to pie chart. Anyone who have idea about this problem then please help me. I am using laravel5 and js(http://www.highcharts.com/demo/pie-basic)
I have a table named products which contain different items that belongs to different category and they are in categories column. I want to show these category and number of product in pie chart ie product =electronic & number=3,product=clothes & number=2 and so on
My controller function
public function category()
{
$data=[];
// this query select products from "categories" column with count
$recordsByCategories=\DB::table('products')
->select('categories','category_id', \DB::raw('count(*) as totalProducts'))
->groupBy('categories')
->get();
//I have made array to show data in pie chart accoding to js documentation given in above link
$data = array_merge_recursive($data, [
['name' => "{{$recordsByCategories->categories}}",
'y' => $recordsByCategories[0]->totalProducts,
],
]);
return view('dashboard.show',compact('data'));
Actual js is like this
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
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: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
And my view is like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 80%;min-width: 500px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
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: [{
type: 'pie',
name: 'Cases',
data: {!!json_encode($data)!!}, //I made changes here
}]
});
});
</script>

{{$data[0]}}
try as shown above.

How to change tooltip with jQuery highcharts

I'm trying to have my tooltips display my y value instead of the percentage they currently do. For example, when hovering over Yellow, the tooltip reads 22.6%. It should instead read 91.5 yellow skittles.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: { text: 'Skittles By Color' },
subtitle: { text: '15.4 oz (437 g) Bag' },
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' },
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Color %',
data: [
{ name: 'Green', y: 64, sliced: true, selected: true, color: '#00ff00'},
{ name: 'Purple', y: 71, color: '#660066' },
{ name: 'Red', y: 88.0, color: '#dd0000' },
{ name: 'Orange', y: 91, color: '#ff6600' },
{ name: 'Yellow', y: 91.5, color: '#ffff00' }
]
}]
});
});
jsfiddle

Do you see the tooltip section in your code? That's what you need to change:
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
...should be...
pointFormat: '<b>{point.y} skittles</b>'
As demonstrated here: http://jsfiddle.net/jpotLvt7/11/.
When you have problems like this in the future, I'd recommend looking in your code to see if there are any parts that have names relevant to your issue. In this case, it wasn't too hard to find. You wanted to change the tooltip text, and there was a tooltip { ... } part of your code.