We Keep Coding

Highchart's Pie Chart Opacity Changes on Hover

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

how to draw hour and minute value (hh:mm) pie chart using highcharts,javascript

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
}
});*

Loading JSON string into a pie chart in highcharts

I need to include my json String output to a highcharts --pie chart category
but chart is not loading properly
This is my JSON string
var json = {"{\"name\":\"BillToMobile\"}":{"y":2.35},"{\"name\":\"Telenav\"}":{"y":13.59}}
Highcharts.chart('container', {
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: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: json
}]
});
Below is the chart what I'm getting when loading this jsonstring.
Can any one help me with this because I'm new to this.Thanks in advance.

Try formatting your json this way
var json = [{name: "BillToMobile", y: 2.35}, {name: "Telenav", y: 13.59}]
To convert the json you have you can use this:
ES5 or earlier
var properJson = [];
for (var i in json) {
var item = JSON.parse(i);
for (var j in json[i]) {
item[j] = json[i][j];
}
properJson.push(item);
}
ES6
var properJson = [];
for (var i in json) {
var item = JSON.parse(i);
Object.assign(item, json[i]);
properJson.push(item);
}

Highcharts Pie chart not accepting values

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

How can i get pie chart with dynamic json data in Angular js

in my controller:
calling the web services if the services is success then get the data and pushinig the data into corresponding arrays
for(var i = 0; i < $scope.reportRangeList.length; i++)
{
count++;
if(angular.isNumber($scope.reportRangeList[i].businessName))
{
$scope.nameBusiness.push($scope.reportRangeList[i].businessName);
}else{
$scope.nameBusiness.push(+$scope.reportRangeList[i].businessName);
}
if(angular.isNumber($scope.reportRangeList[i].total1))
{
$scope.total.push($scope.reportRangeList[i].total1);
}else{
$scope.total.push(+$scope.reportRangeList[i].total1);
}
if(count == $scope.reportRangeList.length){
//$log.info("dddd"+ angular.toJson($scope.bname) )
$scope.fetchChart();
$scope.comlete = true;
}
}
and in fetchChart() :
$scope.fetchChart = function(){
$scope.chartConfig = {
title: {
text: ""
},tooltip: {
visible: true,
pointFormat: '<b>{point.name}</b>: {point.percentage:.1f} %',
},
options: {
chart: {
type: 'pie'
},
plotOptions: {
series: {
stacking: ''
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
},
legend: {
layout: 'vertical',
align: 'topleft',
verticalAlign: 'top',
borderWidth: 1,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
},
/*xAxis: {
categories: $scope.bname
},*/
credits: {
enabled: true
},
seriesDefaults: {
labels: {
template:'{series.name}: <b>{point.percentage:.1f}%</b>',
position: "outsideEnd",
visible: true,
background: "transparent"
}
},
series: [{
type: "pie",
name: "",
data: //$scope.bname,
[
$scope.nameBusiness,$scope.total
//['Firefox', 42.0]
/* ['IE', 26.8],
{
name: 'Chrome',
y: 14.8,
sliced: true,
selected: true
},
['Safari', 6.5],
['Opera', 8.2],
['Others', 0.7]*/
],
}],
loading: false
}
};
I would like to display the pie chart high chart with above data ,in for loop i am try to push only numbers but it shows single line of pie chart even the circle is not formed .with out converting to number type when I was push ,it shows http://www.highcharts.com/errors/14 error .One more thing I can share $scope.reportRangeList[i].businessName is string type and $scope.reportRangeList[i].total1 is number type .
The pie chart is working with hard coded data .Now how can I get pie chart with dynamic json data .

The problem is that businessName is string, and your data format expects to be number. I guess you have pairs businessName + total1 for each slice, that's correct? In that case, create one point for each of pairs:
series: [{
type: "pie",
name: "",
data: [
[ $scope.nameBusiness, $scope.total ] // [name, value] format
]
}],

As I'm working on angular 2, I'll provide solution related to it.. See if it can help you..
Firstly, create a function and call the service which will fetch
result from the server and store the result in a variable.
Then use that variable in data section of your graph in place of static data.
Hope it will solve your issue.