I have this chart:
http://jsfiddle.net/ECAM9/1/
And it works fine.
However when I print or export it, I want the resulting image or pdf file to look like this:
http://jsfiddle.net/rFzTG/
That means that I want every point to have info over it.
I was looking at this answer:
Highcharts add legend on export
And I tried adding this:
exporting:{
chartOptions:{
scatter: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C';
}
},
}
}
},
But again, the jpg file I print is without the info.
One way:
1) use 'useHTML' in the datalabels
2) on chart load event, hide the datalabel elements
The chart will display without datalabels, since you hid them, but print with datalabels, since the chart was created with them
http://jsfiddle.net/jlbriggs/Z7csw/
dataLabels: {
enabled: true,
useHTML:true,
formatter: function() {
return '<div class="datalabel">' +this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C</div>';
}
},
.
events:{
load:function() {
$('.datalabel').hide();
}
}
EDIT: -->
Ok, I have a quick example that works with printing here, based on comments below:
http://jsfiddle.net/jlbriggs/Z7csw/6/
It's not perfect, but it does work...
Related
Please see attached image from below link. i am making chart of dummy data for a local project.
Problem Statement:
My problem is when i set userHTML: true in below code, it move my x-axis labels to up. but when i remove this line, my labels are on their right position. but i need useHTML true and their right position same time.
xAxis: {
categories: seriesDataMonthName,
title: {
text: 'Month/Year (Charge Date of Service)'
},
labels: {
useHTML: true,
formatter: function () {
return '<a style="display:inline !important" class="clsCPTTrendingChart" data-toggle="modal" data-target="#myModal" name="' + this.value + '">' + this.value + '</a>'
},
}
},
Thanks for comments. I simply remove the useHTML: true and call javascript function directly in tag. It works for me.
I need to have the series name printed on each column. Right now you can only print the value of the column as a label. http://jsfiddle.net/mVxGz/
Any ideas on how to do that?
plotOptions: {
series: {
dataLabels: {
align: 'left',
enabled: true,
rotation: 270,
inside: true
}
}
}
This can be done via the formatter. For example:
formatter: function () {
return this.series.name + ' - ' + this.y;
}
I have a Highcharts line chart and have tooltips enabled, however, I would like to change the background color of tooltip for just a single data point on the chart.
Is it possible to do so?
What I have so far
tooltip: {
formatter: function () {
return this.y;
},
backgroundColor: '#68BD49',
borderColor: '#000000',
borderWidth: '1'
},
Yes it is possible, by using HTML option and define custom parameters. Obviously you can use CSS styles / classes disable padding/margins, but in the simplest way you can achive this in this way:
tooltip: {
useHTML:true,
formatter: function() {
console.log(this);
if(this.point.customBck)
return '<div style="background-color:red;">The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
else
return '<div>The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
}
},
http://jsfiddle.net/XnLpH/1/
I am new to highchart and am using it to render bar chart on my webpage. But the chart is not getting displayed while printing. Only the X and Y axis is printing with values but not the bars on it.
I am using IE8. The bar chart is visible(on print) in IE8 mode but its not visible in IE8 Compatible mode. I need to make it work on IE default mode i.e. IE8 compat. mode.
Can anyone help me in this issue.
I am adding a code chunk of my js function where I am printing my highchart in a lightbox window.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containerDivID',
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: xDataValues
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' kr';
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: 1,
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
}
,
yAxis: {
labels: {
formatter: function() {
return this.value;
}
},
title:{
text: ''
}
},
series: [
{
name: 'YAxis',
color: '#37789F',
data: yDataValues
}
],
credits:{
enabled: false
}
});
In this lightbox I have a print button on pressing this button I am calling window.print() to print the page. On my print page I can see the y and x axis and there data but cannot see my bar charts. But If I change IE8 mode from Compatible to IE8 standard mode then I can see my chart on printing.
Regards,
Andi
For me I didn't use the print() function to print the chart as I need to print extra data with the chart; As my chart is part of a report.
kindly find the custom print function I wrote:
function printReport() {
w = window.open();
var svg = myChart.getSVG();
//clone the div you want to print which contains your chart
var toprint = $('#bs-results') .clone();
//replace the chart with the svg
toprint.find('#graph_div').html(svg);
//right the output to print it
w.document.write(toprint.html());
w.print();
w.close();
}
Please take look at compatibility page http://www.highcharts.com/documentation/compatibility, we support native browser but not compatibility mode.
Based on: How to position datalabel at the base of bar series
I've made some updates so that a column chart shows a stacked column for 100%-total
However, using:
stackLabels: {
formatter: function() {
return this.total + '%';
},
enabled: true,
verticalAlign: 'middle',
align: 'left',
y:10
},
I am getting the total 100% for the entire stack. How can I adjust the formatter to only show the value for a single series?
Try this.
formatter: function() {
return this.total + '%';
},
I have trying SUM for 3 number of stack bar and it only using enable : true;
I am not sure but to get value for individual series you can use this.y or this.x.
try
return this.x OR
return this.y