Highcharts convert: not showing pie chart data labels - highcharts

I'm using PhantomJS with Highcharts and Highcharts convert to render charts on a server. I'm attempting to render a pie chart with data labels enabled. My configuration JSON works fine when run in a browser, but the same JSON with PhantomJS omits the data labels. Everything else rendered is correct.
Here is my JSON:
{
chart: {
height:500,
type: 'pie',
},
legend: {
margin: 30
},
plotOptions: {
pie: {
showInLegend: true,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)',
},
}
},
series:
[{
name: 'Count',
data: [
['A', 12 ]
,
['B', 500 ]
,
['C', 50 ]
]
}]
}
Here's a link to a JSFiddle with the same JSON, which works correctly:
https://jsfiddle.net/j2nb72L7/
Here is the image output from PhantomJS:


This was a bug in the version of Highcharts being used. I was using v4.0.1, upgrading to v4.2.5 fixed it.

Related

Highchart line chart with category do not occupy full width

I'm using Highchart to generate a line chart with data labels. Here is an example of what I'm doing:
Highcharts.chart('container', {
title: {
text: 'Chart without categories'
},
xAxis: {
categories: ['a','b'],
},
series: [{
data: [1,2]
}]
});
This code generates the following chart: As you can see, there is a space between the line and and the borders of the chart.
Without using categories, there is no space:
What can I do to remove this spaces?

That is a default behavior of category axis type. Please check this example: http://jsfiddle.net/BlackLabel/wuqxb2cy/ with a more visible distribution into categories.
As a solution you can set xAxis.tickmarkPlacement and series.pointPlacement to 'on':
xAxis: {
categories: [...],
tickmarkPlacement: 'on'
},
series: [{
data: [...],
pointPlacement: 'on'
}]
Live demo: http://jsfiddle.net/BlackLabel/qkezc3mx/
API Refefence:
https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/series.line.pointPlacement

Highcharts export duplicating category labels

I'm generating a series of highcharts and then exporting them to a pdf via jsPDF. They display fine on screen, but when I export an image of the graphs, it duplicates the X axis category labels.
Here is my chart code:
$('#chart').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 20,
spacingLeft: 0,
spacingRight: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: {
categories: ['Sales Performance',],
labels: {
style: {
color: '#000'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}%',
overflow: 'justify',
style: {
color: '#000'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '% Change',
color: '#c0504d',
data: [4.5]
}]
});
And an example of the issue: http://jsfiddle.net/212qb8qs/
Any ideas???
UPDATE:
The issue was with canvg converting the svg. Solved thanks to this comment: When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?

Well, from your jsfiddle, you use canvg along with highcharts to get a canvas and then convert to PDF what you get. The problem comes from canvg wich seems to handle a bit strangely the tspan that are used in the SVG generated by highcharts (mostly for titles).
So I redirect you to my answer in another question here , where you'll find a dirty fix for that.

Highcharts: phantomjs export image missing labels

My chart is a stacked bar chart with requirements to have data labels on the actual bars.
The in browser version is working perfectly featuring the data labels accordingly, however the exported image does not have them.
Here is my code:
{
colors: ['#0EAC55','#91C855','#F3BA0E','#F39595','#F30E0E'],
chart: {
type: 'bar',
height: 195
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3'],
},
tooltip: {
valueSuffix: '%'
},
yAxis: {
min: 0,
title: {
text: ''
},
max: 100,
opposite: true,
},
legend: {
backgroundColor: '#FFFFFF'
},
plotOptions: {
series: {
stacking: 'percent',
groupPadding: 0,
dataLabels: {
enabled: true,
color: '#000000'
}
}
},
series: [{"name":"5","legendIndex":5,"data":[41.1,44.2,60.2]},{"name":"4","legendIndex":4,"data":[42.9,38.4,25.2]},{"name":"3","legendIndex":3,"data":[12.2,12,8.8]},{"name":"2","legendIndex":2,"data":[3.3,5,3]},{"name":"1","legendIndex":1,"data":[1,1,3.3]}]
}
I am using the phantomjs server to produce images as these need to be generated on the server side. http://www.highcharts.com/component/content/article/2-articles/news/56-improved-image-export-with-phantomjs/

I had the same problem. I tried all options above. Set all animation options to false, all defer options to false, but it didn't help me to solve the problem.
Finally I found an issue on github.com. And it was a bug of HighCharts. I was using 4.0.1 version of Highcharts.
So, the solution is just to update your highcharts file to the lastest version if the suggestions above didn't work.
My sample code can be found on jsfiddle.

Disable all animations, and make sure you have up-to-date exporting server, not some old one.
Also, set defer options to false.

Expanding on the answer given by Pawel Fus, I found that making sure animation was set to false did make a difference, but not the at the overall level (i.e. chart.animation = false), it had to be set on chart.plotOptions.series.animation = false.

Highcharts - Cannot display data labels on a spline chart

I am trying all kinds of permutations to make data labels on the spline chart but I just dont know what I am doing wrong.
Any help would be appreciated.
JsFiddle here
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
data: [
[Date.UTC(2005,9,01), 2.02],[Date.UTC(2006,8,30), 7.56],[Date.UTC(2007,8,29), 5.22],[Date.UTC(2008,8,27), 6.57],[Date.UTC(2009,9,03), -4.48],[Date.UTC(2010,9,02), 5.29],[Date.UTC(2011,9,01), 7.44],[Date.UTC(2012,8,29), 3.39],[Date.UTC(2013,8,28), 6.54],
]
}]

Under plotOptions, you are setting the dataLabels option for line charts, not spline charts. They have to match:
plotOptions: {
spline: { // has to say spline here
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
Updated fiddle.

Possible to use Highcharts Scatter Plot with categories?

Highcharts v3.01
I'm trying to use a scatter plot to draw points within named categories (these are actually numeric, but out of series and I don't want gaps).
Using line graph types would work, but I'd rather not as I have potentially hundreds of series and scatter points are clearer.
The closest I have come is this:
EDIT - I would post a descriptive image, but apparently I need reputation points. Sigh.
Please see here: http://i117.photobucket.com/albums/o63/Harry_Flashman/close_zpsfe6d3ea2.png
This is using points referencing an x and y,
data: [{x:108432,test:100,y:0}, {x:109802,test:100,y:51}, etc. ]
I want to do exactly as above, but without the gaps.
The only way I can see to have a non-linear gap-free axis is with categories, which I've used before on other line-type graphs, but never with a Scatter Plot.
If I use the x-axis type "category" with a category array instead, it only assigns one scatter value to each and the remainder to ascending numeric categories (i.e. it doesn't group them if I use the point "name" option).
xAxis: {
type: category,
categories: ['108432','109802','110240', etc. ]
}
with datapoints that look like this:
data: [{name:'108432',test:100,y:0}, {name:'109802',test:100,y:51}, etc. ]
Ends up like this. Each scatter point gets its own category.
http://i117.photobucket.com/albums/o63/Harry_Flashman/not_zps31aa4fef.png
Any help appreciated, this would be great if I could get it to work.
Thanks!
Pat
PS. Added entire chart script (minus large amounts of data) below. This is the "almost works" version.
$('#container').highcharts({
chart: { type: 'scatter', zoomType: 'xy' },
title: { text: 'Revision vs Runtime Scatter' },
subtitle: { text: 'L3 Performance Test' },
xAxis: {
title: { enabled: true, text: 'Revision' },
startOnTick: true,
endOnTick: true,
showLastLabel: true,
showEmpty: false,
legend: { y: 120, floating: true, backgroundColor: '#FFFFFF' },
labels: { rotation: -90, align: 'right' },
categories: ['101831','101849','101850','101857','101861','101866','101868','101878','101879','101880','101881','101882','101883','101884','101885','101888','101894','101900','101903','101905','101908','101913','101914']
},
yAxis: { title: { text: 'Variance (%)' } },
legend: { layout: 'vertical' },
plotOptions: {
scatter: {
marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } },
states: { hover: { marker: { enabled: false } } },
tooltip: {
headerFormat: '<b></b>',
pointFormat: '<b>Test {point.test}</b><br/>r{point.x}<br/>{point.y}% change<br/>{series.name}'
}
}
},
series: [{
name: 'PRd',
data: [{x:101857,test:267,y:0}, {x:101861,test:267,y:-1}, {x:101866,test:267,y:-0}, {x:101868,test:267,y:-1}, {x:101878,test:267,y:-1}, {x:101879,test:267,y:-1}, {x:101880,test:267,y:-0}, {x:101881,test:267,y:-0}, {x:101882,test:267,y:-0}, {x:101883,test:267,y:-0}, {x:101884,test:267,y:-0}, {x:101885,test:267,y:-0}, {x:101888,test:267,y:-0}, {x:101894,test:267,y:-1}, {x:101900,test:267,y:-0}, {x:101903,test:267,y:-0}, {x:101905,test:267,y:-1}, {x:101908,test:267,y:-1}, {x:101913,test:267,y:0}, {x:101914,test:267,y:1}, {x:101831,test:430,y:0}, {x:101849,test:430,y:1}, {x:101850,test:430,y:1}]
}, {
name: 'Non-PRd',
data: [{x:101831,test:100,y:0}, {x:101849,test:100,y:51}, {x:101850,test:100,y:51}, {x:101857,test:100,y:52}, {x:101861,test:100,y:49}, {x:101866,test:100,y:50}, {x:101868,test:100,y:50}, {x:101878,test:100,y:50}, {x:101879,test:100,y:50}, {x:101880,test:100,y:50}, {x:101881,test:100,y:50}, {x:101882,test:100,y:50}, {x:101883,test:100,y:50}, {x:101884,test:100,y:50}, {x:101885,test:100,y:50}, {x:101888,test:100,y:50}, {x:101894,test:100,y:50}, {x:101900,test:100,y:50}, {x:101903,test:100,y:0}, {x:101905,test:100,y:50}, {x:101908,test:100,y:51}, {x:101913,test:100,y:50}, {x:101914,test:100,y:50}, {x:101831,test:10937,y:0}, {x:101849,test:10937,y:2}]
}]
});
});

Ok, fixed it via a workaround,
Essentially in Javascript I've added a position to the point arrays relating to which of the categories the point belongs to (generated via PHP, the categories are sorted ascending). Relevant bits are as follows:
xAxis: {
categories: ['r101831', 'r101849', 'r101850']
}
plotOptions: {
tooltip: {
headerFormat: '<b></b>',
pointFormat: '
<b>Test {point.test}</b><br/>
r{point.revision}<br/>
{point.y}% change<br/>
{series.name}'
}
}
series: [{
name: 'PRd',
data: [
{x:3,revision:101831,test:267,y:0},
{x:4,revision:101849,test:267,y:-1},
{x:5,revision:101850,test:267,y:-0}
]}
]
End result looks gorgeous, I love HighCharts.
Pic here: http://i117.photobucket.com/albums/o63/Harry_Flashman/fixed_zps9952d58d.png

Resources