High Charts Can't hide Pie Chart data labels - javascript

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
}
}
}
}

Related

Highcharts - Pie chart legend remains hoverable on second series

I have a chart where I had to build a second series to format the labels for my design brief. In this the data labels on the pie chart show percentages, and the legend shows the labels of the items. Currently my implementation works fine except that the legend is still hoverable, and causes the chart to wash out.
Highcharts.chart({
chart: {
styledMode: true,
renderTo: chart,
events: {},
},
title: {
text: "",
},
credits: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
enableMouseTracking: false,
},
pie: {
dataLabels: {
distance: 3,
padding: 0,
// crop: false,
// overflow: "allow",
alignTo: "toPlotEdges",
verticalAlign: "middle",
},
},
},
series: [
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: highchartsData,
innerSize: "25%",
showInLegend: false,
size: "95%",
states: {
hover: {
enabled: false,
},
},
},
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: labelData,
showInLegend: true,
states: {
hover: {
enabled: false,
},
},
},
],
});
Currently, this is the behavior:
Not sure what to do to disable this that I haven't already done.
You don't need to use the second series, use instead format for data labels.
series: [{
dataLabels: {
format: '{point.y}%'
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/jhmfcty3/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.format

How to add dynamic data in highcharts pie chart in laravel

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

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

HighChart Pie only showing after complete page load

I am using HighChart to draw a pie chart.Pie chart container is in an ascx control.In the page there are 5 controls other than this.Each ascx sections are loading by ajax async calls.Problem is that graph in first section is showing only after complete page page load.Please provide a solution.
$('#arrhythmiacontainer').highcharts({
chart: {
//plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
colors: ['#F5F5F5'],
title: {
text: ''
},
exporting: {
enabled: exportingStatus
},
tooltip:{
formatter: function() {
return false;
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
size:'100%',
dataLabels: {
enabled: true,
distance: -70,
style: {fontSize: '12px',fontWeight: 'bold'}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'pie',
name: 'Percentage',
data: [['NO DATA AVAILABLE', 100]]
}]
});
}
The above graph is in first control and it is binding using ajax call.all the other informations in control1 is loading after first ajax call.but graph is loading only after window stop.

how to update a highcart column chart on a button click

i have a column chart, and i need to refresh (redraw) it, on button click.
this is the code i load when i load the page:
function setParetoChart(data) {
$('#liveChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Detail'
},
subtitle: {
text: 'Detail'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Totale Detail'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
cursor: "pointer",
point: {....
},
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> del Totale<br/>Numero Pezzi Scarti: <span style="color:{point.color}"></span>: <b>{point.scarti}</b> '
},
series: [{
name: 'Details',
colorByPoint: true,
data: data
}]
});
}
now, on button click, i get data from an ajax function, that returns an array of objects, in this way;
drilldown: 'var1'
name: 'var1'
scarts: 15,
y; 15
.. and with an array of that objects, i need to redraw my column chart..
This thread might help...
Lazy Highcharts drilldown
The soultion implements lazy drill down highcharts using Ajax.

Categories