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

Highcharts PieChart Legend paging faulty

Creating a few pie charts using Highcharts which render fine, however the legend does not swap between pages. It updates the page number (E.g. 1/4 -> 2/4 -> 3/4) but the contents of the legend does not change.
I have used code from http://jsfiddle.net/qegmnsm7/ and simply passed my own data into it; giving this code:
var areaOptions = {
chart: {
renderTo: 'areaPie',
defaultSeriesType: 'pie',
width: 900,
height: 600
},
title: {
text: "Test Pie Chart."
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
},
exporting: {
buttons: {
printButton: {
enabled: false
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return Math.round(this.percentage) + '% (' + this.y + ')';
}
},
showInLegend: true
, point: {
events: {
legendItemClick: function () {
filterList(this);
this.select();
return false;
},
click: function () { filterList(this); }
}
}
},
series: [{
type: 'pie',
name: 'Banana',
data: []
}]
}
};
areaOptions.series = #Html.Raw(ViewBag.Area);
var areaChart = new Highcharts.Chart(areaOptions);
areaChart.render();
Giving this:
However upon clicking the 'down' arrow, the legend stays exactly the same - apart from 1/2 changes to 2/2.
I have used the example code linked above in my application and it works perfectly; therefore I expected simply updating the data input to work. However something is messing it up and I can't find any other users' questions or google links to help.
What am I doing wrong that stops the legend from paging properly?
Edit: Here is a JSFiddle showing exactly what I mean.

areaChart.render(); is not a part of official API and is causing the problem with legend paging. Removing this part of code will fix you issue.
Fixed code in JSFiddle: https://jsfiddle.net/kfdoxscx/9/

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

DataLabels in Highcharts are outside the container / not showing

I'm drawing a half-donut-pie-chart (using innersize and start-/endAngle). But my datalabels are outside the plot area (below the center point / xAxis) or not showing at all regarding my settings.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '',
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
size: '140%',
cursor: 'pointer',
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
//useHTML: true,
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
},
style: {
width: '100px' // for line wrap on long dataLabels
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox and this is very very very long name with some spaces etc.', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
See here: jsfiddle
Using useHTML: true, useHTML: true did not work at all any positive.
Using useHTML: true would render the overflowing dataLabels inside the plot, but my long dataLabels disapeared.
So how can I accomplish this having the following things in mind?
My half-donut should always be at the bottom of my plot area and use
the space (not be too small).
It happens that I have long datalabels so defining a style.width seems to do a line-wrap if needed.
DataLabels should always be above the xAxis and not fall below the bottom of my half-donut.
DataLabels should always be shown and be outside of the chart using connectors.
Thanks in advance and best regards.

It looks like possibly bug, reported here: https://github.com/highslide-software/highcharts.com/issues/2630

How can i keep the color the same in highcharts

i am using highcharts for the first time. It looks cool and it is almost doing what i want. I use a piechart and refresh the data every second. That is working only the color of the pieces are changing every second. How can i keep the same color?
This is my code
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
animation: false,
plotBorderWidth: null,
plotShadow: false,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
$.getJSON("opencont.php", function (data) {
$.each(data.vragen, function (index, value) {
series.addPoint([value.short, value.antwoorden], true, true);
})
})
}, 1000);
}
}
},
title: {
text: ''
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['a', 0], ['b', 0], ['c', 0]
]
}]
});
});

Do you really want to add new points to the Pie chart, or do you want to replace the existing points with new values?
If it's the later, you might want to look at Series setData method. Example at http://jsfiddle.net/ebuTs/22/

Have you tried the chart.colors option?
http://www.highcharts.com/ref/#colors
I believe you need to have the same number of colors as data points. Seems to work for me:
http://jsfiddle.net/X9XYK/