I'm trying to add a legend on a pie when exporting the chart as PNG.
Here is my code :
var chart_23_106;
$(document).ready(function () {
chart_23_106 = new Highcharts.Chart({
chart: { type: 'pie', renderTo: 'container_23_106', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false },
title: { text: 'NRJ' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 },
plotOptions: {
pie: { borderWidth: 0, shadow: false, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false } }
},
colors: ['#9F9F9F','#BE6EBE','#FFA74F','#B7B7D0','#CBE22A','#00C8C8'],
credits: { enabled: false, text: "Source: Air Normand", href: "" },
exporting:{ buttons: {
printButton: {enabled:false},
exportButton: {menuItems:null,onclick:function(){this.exportChart(null,
{ chart: {reflow: false, width: 400},
title: {text: "Répartition de la Consommation"},
subtitle: {text: "Haute-Normandie"},
plotOptions: {pie: {dataLabels: {enabled: true}, showInLegend: true}},
credits: {enabled: true} }
);}}
}},
lang: {exportButtonTitle: "Export image au format PNG"},
series: [{
type: 'pie',
name: 'Proportion',
data: [
['Activite 1', 684.6],
['Activite 2', 564.7],
['Activite 3', 244.4],
['Activite 4', 42.8],
]
}]
});
});
In the function exportChart, all but the plotOptions gives the right effect. In the PNG file, the title is changed, subtitle and credits are added, but the dataLabels and the legend don't appear...
Anyone knowing why ?
Could anyone help me ?
Thanks
Yes it is possible by disabling legend in chart and in exporting parameters (http://api.highcharts.com/highcharts#exporting.chartOptions) set this option as active.
Working example: http://jsfiddle.net/xvQNA/
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
legend:{
enabled:false
},
exporting:{
chartOptions:{
legend:{
enabled:true
}
}
},
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',
showInLegend:true,
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]
]
}]
});
});
For me it worked when i disabled the navigation in the exporting options :
exporting: {
chartOptions: {
legend: {
navigation: {
enabled: false
}
}
}
},
you just should add enable: true in dataLabels:
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
}
Related
My chart was ok, I don't know what happened that the series name disappeared!
Maybe highcharts last updates need another options, or rtl causes problems.
My code: fiddle
What am I missing here?
$(function() {
$(document).ready(function() {
Highcharts.chart('user_info_46', {
chart: {
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: '',
useHTML: Highcharts.hasBidiBug,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
useHTML: true,
align: 'right',
rtl: true,
},
tooltip: {
useHTML: true,
align: 'right',
},
credits: {
enabled: false
},
series: [{
name: 'تعداد',
colorByPoint: true,
data: [{
name: 'آقا',
y: 7,
color: 'cornsilk'
}, {
name: 'خانم',
y: 2,
color: 'green'
}]
}]
});
});
});
Below is the highcharts code I am using with dynamic values $fprgreen, $fprblue and $fprdrkorange.
$('#seo-perform-fpr').highcharts({
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: false,
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: false
}
},
series: [{
colorByPoint: true,
data: [{
name: 'High',
color: '#8bc43f',
y: <?php echo $fprgreen;?>
}, {
name: 'Steady',
y: <?php echo $fprblue;?>,
// sliced: true,
// selected: true,
color: '#01A9F4',
}, {
name: 'Underperforming',
y: <?php echo $fprdrkorange;?>,
color: '#f57c00',
}, ]
}]
});
If the values of $fprgreen, $fprblue and $fprdrkorange are 0, I need to show "No data found" message on the place of pie chart.
I have a highchart, as showed on the appended image.
I am attempting to format the legend of only my last data stacked. In this case, index 1 always.
Any help on how to achieve this?
My main goal, being, on there always showing a value i have in a variable, which will be the max value possible.
createChart: function (id, chartData, maxYValues, chartTitle, chartNames, dataToMax) {
var me = this;
debugger;
me.highChart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: id
},
title: {
text: chartTitle,
fontSize: '8px'
},
xAxis: {
labels: {
overflow: 'justify'
},
categories: chartNames
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
stackLabels: {
enabled: true,
format: maxYValues
},
title: {
enabled: false
}
},
colors: ['#afafaf', '#f89c1c', '#3aaa80'],
credits: {
enabled: false
},
tooltip: {
pointFormat: '<span>{point.name}</span>'
},
plotOptions: {
series: {
colors: ['#3aab80', '#3aab80'],
colorByPoint: true,
borderWidth: 0,
dataLabels: {
enabled: true,
headerFormat: '{point.y + point.name}',
format: '{y} mb',
verticalAlign: 'top',
y: -20
}
},
column: {
stacking: "percent"
},
area: {
dataLabels: {
enabled: false
}
}
},
legend: {
labelFormat: '<b>{point.y} MB</b><br/>',
labelFormatter: function () {
if (me.series.data.index === 1) {
return maxYValues;
}
}
},
series: [{
showInLegend: false,
data: chartData,
color: '#3aab80'
}, {
showInLegend: false,
data: dataToMax,
legend: {
labelFormat: maxYValues + 'MB</b><br/>'
}
}],
navigation: {
menuItemStyle: {
fontSize: '8px'
}
}
});
},
Thank you
UPDATE: Added code snipped, and updated the image to what my current code is showing
I have more than 1 highchart on a single webpage. However when I refresh the page I get another context menu button added to the additional highcharts. I have tried destroying the highchart before recreating to fix this but that didnt work. Any ideas how i can stop the context menu buttons from incrementing with page refreshes?
// Submits form values and ...
$('#dateform').submit(function (event) {
var data = $(this).serialize();
var monthSelect = $("#month option:selected").text();
var yearSelect = $("#year option:selected").text();
$("#reportDate").text(monthSelect + " " + yearSelect);
//-------------------------------------------------------------------------------
// Procedures - Bar
$.getJSON('reports_procedure_count_bar_ajax.cshtml', data, function (chartData) {
// Build the chart
$('#container1').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: false
},
showInLegend: true
}
},
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]
]
}]
});
});
$.getJSON('reports_procedure_count_bar_ajax.cshtml', data, function (chartData) {
// Build the chart
$('#container2').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: false
},
showInLegend: true
}
},
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]
]
}]
});
});
return false;
});
I'd like to overlay a custom layer over a chart (e.g. a comment, author). Reading the API there seems to be already an object for the purpose:
A HTML label that can be positioined anywhere in the chart area.
I tried using this on one of the example charts but it has no effect (see below), although the interpreter isn't issuing any error. Am I doing something wrong or should a lable of this kind be created some other way?
Thank you.
chart = new Highcharts.Chart({
chart: {
renderTo: 'pie-container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#FFFFFF',
connectorColor: '#FFFFFF',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
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]
]
}],
labels: [
{html: "<b>This is a label!</b>",
style: {
left: '100px',
top: '100px',
width: '50px'}}],
});
});
});
labels should be an object.
Then you have to add each label as an element of items.
labels: {
items: [{
html: "<b>This is a label!</b>",
style: {
left: '100px',
top: '100px',
width: '50px'
}
}]
}
Demo