I Have a Pie Chart Whose functionality is working fine right now. The Problem is with its display.When I Hover upon the Pie Chart's one section, The other sections's opacity of the pie chart get low. As shown Below
My Script is Here :
<script type="text/javascript">
var data = <?php echo json_encode($json_data) ?>
data.forEach(function(el) {
el.name = el.label;
el.y = Number(el.value);
});
Highcharts.chart('userpie', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: undefined
},
credits: {
enabled: false
},
exporting: { enabled: false } ,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme &&
Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Users',
colorByPoint: true,
data: data
}]
});
</script>
Am I missing Something ?. Please Help. Thanks in Advance
You can change the opacity property in the inactive state:
plotOptions: {
pie: {
states: {
inactive: {
opacity: 1
}
},
...
}
}
Live demo: http://jsfiddle.net/BlackLabel/05qwthgz/
API Reference: https://api.highcharts.com/highcharts/series.pie.states.inactive.opacity
Related
i am using pie chart of highcharts and i am not able to popluate dynamic data. Here is static form pie chart view
and code for above graph is
Highcharts.setOptions({
colors: projectColor.split(','),
});
Highcharts.chart('myChartStatics', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
type: 'pie',
},
title: {
text: ''
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
}
},
series: [{
type: 'pie',
innerSize: '60%',
name: 'Tasks',
colorByPoint: true,
data: [
[
"Inbox", 12
],
[
"Usage Guidance", 12
],
[
"Jobeegoo", 12
],
]
}]
});
now i want to add data array dynmaic on ajax call i am tried but it does not show graph
projectName = projectName.split(',')
totalTask = totalTask.split(',')
var loop = [];
for(var x = 0; x < projectName.length; x++){
loop.push([projectName[x] , parseInt(totalTask[x])]);
}
var data_value = JSON.stringify(loop);
console.log(data_value)
and console disply
[["inbox",128],["Usage Guidance",116],["FocusChain",0]]
tell me where i am wrong
I'm using JavaScript to format the y values of a piechart to two decimal places but they are not appearing on the chart.
I need to take the percentage of each and then return them. fiddle
If the fiddle doesn't work this is my code.
$(function () {
var dataPie =[];
var abc =[{"val":"19981","name":"TOTAL"},{"val":"2051","name":"\"NATURAL GAS\""},{"val":"274","name":"\"OTHER FOSSIL FUELS\""},{"val":"8826","name":"\"DUAL FUEL\""},{"val":"5351","name":"\"NUCLEAR\""},{"val":"2628","name":"\"HYDRO\""},{"val":"501","name":"\"WIND\""},{"val":"350","name":"\"OTHER RENEWABLES\""},{"val":" ","name":"\"UNKNOWN\" "}];
$.each(abc,function(i,el)
{
var total = null;
if(el.name == "TOTAL"){
total = parseInt(el.val);
}else{
var p = parseInt(el.val) / total * 100;
dataPie.push({name :el.name,y: p});
}
});
$('#container').highcharts({
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:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.2f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: dataPie
}]
});
});
highcharts is capable to do that ,you need to simply use
{point.percentage:.2f}
See the fiddle, which has your last question's data updated here
I am working on an application using AngularJS and I am using Highcharts to display a pie chart of some data. The problem I am having is that the data labels for each pie slice are not hiding. I have tried the following after googling the topic but it doesn't work. Any suggestions.
$scope.chartConfig = {
options: {
chart: {
type: 'pie'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: 'All Tickets',
data: [
['Scheduled', 5],
['Completed', 8]]
}],
title: {
text: 'Ticket Information'
}
};
HTML File
<div id="order-list-graph" class="pull-left">
<highchart id="ticketHighChart" config="chartConfig" class="span10"></highchart>
</div>
I figured out what to do. I needed to place the plotOptions object within the options object as such:
options: {
chart: {
type: 'pie',
animation: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
}
}
}
}
Here is the fiddle for pie chart.
Pie Chart JSFiddle
On hovering the slice, it displays slive value.
Can I alert the slive value onhover?
Actually my purpose is displaying another PIE chart for that slice on hover or click event of slice.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//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]
]
}]
});
});
yes you can do that.
in tooltip you have formatter this will allow you to have a javascript method to do your own stuff when a point is hovered on the chart.
formatter: function(){
//your stuff here
}
Here is a working example for you : http://jsfiddle.net/XZvuL/
hope this is what you are looking for.
Try this
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'
}
},
point: {
events: {
mouseOver: function (event) {
var point = this;
alert(this.percentage)
}
}
}
}
},
DEMO
Click Event
point: {
events: {
click: function (event) {
var point = this;
alert(this.percentage)
}
}
}
DEMO
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;
}
}
}
},