I am saving a a chart as SVG, using the getGSV() method. The chart in question is a rather complex pie chart, that uses formatters to annotate the slices with information. These labels however do not show up in the SVG export, it just contains the unannotated chart. I am aware that by default, exporting HTML in svg is not supported, so i tried enabling the allowHTML option, but my problem remains unsolved.
In the method that assembles the data structure:
"dataLabels": {
style: {
width: '70px',
textAlign: 'right'
},
enabled: true,
useHTML: true, /*already defined in the chart options */
formatter: function()
{console.log(i18next.t("component."+this.point.name+".name")); return
i18next.t("component."+this.point.name+".name") + "<br>" + results[this.point.name]["pie_score"] + "%"},
"distance": -50,
},
and at another point, in the chart definition:
exporting: {
allowHTML: true,
enabled: false
},
The SVG is simply exported via chart.getSVG()...
To clarify, i am merely adding an export pipelin to existing code, so i know the charts themselves work and look as intended, they are only screwed up in the export.
Related
I have a chart that works very well when using the data module with Google spreadsheets. However I need to stop using Google sheets and use CSV on my own server instead. Some of my charts are working, but some aren't. Here's one that is not working. It uses the second column to set the point color, but it's not recognizing it. Any idea what might be wrong here? I edited some of the csv entries to try to make it work, but it's not working much:
http://jsfiddle.net/jmunger/cf6L4bmk/20/
var chart = Highcharts.chart('gfx', {
chart: {
type: 'bar',
},
data: {
csv: document.getElementById('csv').innerHTML,
itemDelimiter: ',',
seriesMapping: [{
color: 2,
label: 3
}]
}
});
console.log(chart);
That problem seems to be a bug in a data module, so I reported it here: https://github.com/highcharts/highcharts/issues/13283
As a workround you can use other color formats:
0;1;blue
1;2;rgb(155,155,55)
2;3;red
Live demo: http://jsfiddle.net/BlackLabel/0gjbn4m6/1/
Something about my env is interfering with Highcharts. I have simplified the code to:
let data = [];
data.push({ name: 'Temperature', data: fake1, color: 'orange', lineColor: 'red' });
Highcharts.stockChart(divId, {
navigator: {
series: {
color: 'orange',
fillColor: 'purple',
lineColor: 'red'
}
},
series: data,
});
The data series is rendered correctly - but with a blue line(s).
The project env is a very complicated DotNet App (not controlled by me) which has Kendo, and plottable and lots of stuff. I have tried commenting out dependencies, no luck.
I can get colors working in a completely standalone env, not in the dot net app. What should I do at this point? I need to control the line colors.
It turns out there are two highstock.js files (same name); one that depends on highcharts.css and one that doesn't. Use the one that doesn't.
I am trying to display a highchart graph and when rendering in FF or IE, I get the above error, but in Chrome and Safari I works without fail. I think it is to do with the animation, but switching the animation off, then subsequently works for line charts, but pie charts does not show a chart at all.
$(canvas).highcharts({
chart : {
type: 'pie'
},
colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
credits: {
enabled: true
},
title : {
text: title
},
plotOptions : {
series : {
animation : isWebkit()
}
},
series: data
});
......
Thank you for your help, I am still having the issues, but I have coded around it for now. I am sure there is lots I did not tell you in my original question that would influence the answer (such as I am using bootstrap as my UI platform, and the chart is in a tab which is not visible when it is built, also on the page is a spreadJS control, and looking at the stack trace, this might have an influence and finally the data object would need expanding as I am setting more options than just the values in your jsfiddle example), so I think it is better if I ask the question again once I can expose the other challenges on the page.
So, again thank you, and I will need to ask the question more clearly.
I am trying to export a Pie chart with data labels. I'm using the Phantomjs server side export functionality. I get the chart image back correctly but the datalabels don't show up. The sample data structure in the web version adds the data labels as expected.
Is there specific configuration requited to get the data labels to show up?
I'm on HIghcharts 4.0.1
The JSON I'm sending over to the phantom server is:
{"infile":"{ legend: {enabled: false},chart: {borderWidth: 0},colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],credits: {text:'CannLabs'},title: {text: 'Potency results'},plotOptions: {pie: {dataLabels: {enabled: true,color: 'black',format: '<b>{point.name}</b>: {point.percentage:.1f} %'}}},series: [{type: 'pie',name: 'Potency Results',data: [{name: 'CBD-V', y: 0.00},{name:'CBD-A',y: 0.00},{name:'CBG',y: 0.00},{name:'CBD',y: 0.01},{name:'THC-V',y: 0.00},{name:'CBN',y: 0.01},{name:'THC',y: 0.87},{name:'CBC',y: 0.02},{name:'THC-A',y: 0.00}]}]};"}
This appears to be a bug in the 4.0.1 version of highcharts. I upgraded to the master version of the highcharts.js file and the labels are now rendered correctly.
If the accepted answer above doesn't help you, try adding animation: false to your series configuration, like so:
plotOptions: {
series: {
animation: false
}
},
I'm trying to generate a PDF report using the Wicked_pdf gem and Highcharts.
I've already tried to set animation, enableMouseTracking and shadow false.
But when wkhtmltopdf tries to generated the PDF files I got an error.
I really don't not what to do, because when I do the same procedure for an HTML, Highcharts renders perfectly.
I fixed it by setting this options:
plotOptions:
line:
animation: false
enableMouseTracking: false
shadow: false
Also, don't forget to include JQuery and inline your styles and scripts
Try setting this:
series: { 'enableMouseTracking: false, shadow: false, animation: false' : nil}
This solution worked for me. I have a pdf view and a html view and implemented solution has:
<more highchart options>
...
plotOptions: {
line: {
marker: {
enabled: false
},
dashStyle: 'ShortDash'
},
series: { #{request.format == 'pdf' ? 'enableMouseTracking: false, shadow: false, animation: false' : nil} }
},
...
<more highchart options>
Try debugging in the QtWeb browser.
Instructions on debugging javascript in Qt here
You may find that your javascript contains unsupported syntax or keywords, which results in the issue as described.
The Qt WebKit rendering engine that wkhtmltopdf was using doesn't support ES2015, so you might have a simple solution like me, which was to replace keywords like let and const.