Currently, I am utilizing highcharts and a phantomjs server for rendering charts and labels. However, I have encountered an issue where the useHTML flag does not function as expected when rendering the labels. Following the instructions in the documentation, I initiated the server using the command phantomjs highcharts-convert.js -host 127.0.0.1 -port 3003
Subsequently, I am sending post requests with the following JSON data as the input file:
{
chart: {
events: {
load: function() {
var label = this.renderer.label('Hello World', {useHTML:true})
.css({
color: '#FF11FF',
fontSize: '12px'
})
.attr({
fill: 'rgba(0, 0, 100, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add()
box = label.getBBox();
label.align(Highcharts.extend(box, {
align: 'center',
verticalAlign: 'top',
x: 0,
y: 20
}),
null, 'spacingBox');
var label2 = this.renderer.label('Goodbye World')
.css({
color: '#222222'
})
.add()
label2.align(Highcharts.extend(label2.getBBox(), {
align: 'left',
verticalAlign: 'top',
x: 0,
y: box.height + 40
}),
null, 'spacingBox');
}
},
height: 800,
width: 500
},
title: {
text: ''
}
};
After exporting this as an SVG, I noticed that the label text remains unchanged. I attempted to modify the code like this:
var label = this.renderer.label('Hello World',null, null, 'rect', null, null, true)
However, this caused the first text to be completely omitted, adding a blue background along with the second text. Surprisingly, the initial text is also unresponsive on export.highcharts.com while the modified version works seamlessly there. Can someone guide me on what error I might be making in this scenario?