Also, on this chart only when I use html to render the legend, I still get a highcharts rendered box next to my html for the first (blue) series. And in all charts, when exported via the server, the html will not render the background color of the div. This can be seen in the images below.
Browser: Export server: Export module:
Is there anything that stands out as to why this will not overlap the two series??
Code: Select all
const exporter = require('highcharts-export-server/lib/index.js');
module.exports = (callback, elrDataJSON, dRatioDataJSON, width, height) =>
{
debugger;
elrDataJSON = elrDataJSON || '[]';
dRatioDataJSON = dRatioDataJSON || '[]';
var elrData = JSON.parse(elrDataJSON);
var dRatioData = JSON.parse(dRatioDataJSON);
elrData = elrData || [];
dRatioData = dRatioData || [];
var max = Math.max.apply(Math, elrData.map((o) => o.y));
var exportSettings = {
type: 'png',
options: {
credits: {
enabled: false
},
chart: {
zoomType: "x",
type: 'column',
width: width || 780,
height: height || 250,
spacingLeft: 5,
spacingTop: 10,
spacingBottom: 5,
spacingRight: 10,
borderWidth: 1,
borderColor: '#00000020'
},
title: {
text: 'Expected Loss Rate with D-Ratio',
style: {
fontSize: "12px",
fontFamily: "Arial Narrow, Tahoma",
fontWeight: "bold",
color: "#41403E"
}
},
xAxis: {
type: 'category',
labels: {
style: {
fontSize: '6pt',
color: "#0000CC"
},
staggerLines: 2,
//rotation: -45,
step: 1
},
tickInterval: 1,
showLastLabel: true
},
yAxis: {
max: max + 2,
tickInterval: (max + 2) / 8,
title: { text: null },
labels: {
format: "{value:.2f}",
style: {
fontSize: "6pt",
fontFamily: "Arial Narrow, Tahoma",
color: "#0000CC"
}
}
},
legend: {
enabled: true,
useHTML: true,
symbolHeight: 0,
symbolWidth: 0,
symbolRadius: 0,
padding: 4,
labelFormatter: function ()
{
return '<div><div style="display: inline-block; width: 8px; height: 8px; background-color: ' + this.color + '"></div> & nbsp; ' + this.name + '</div > ';
}
},
plotOptions: {
column: {
pointWidth: 12,
dataLabels: {
color: "#41403E"
}
},
series: {
borderWidth: 0,
dataLabels: {
verticalAlign: "bottom",
align: "center",
padding: 8,
allowOverlap: true,
style: {
fontSize: "6pt",
fontFamily: "Arial Narrow, Tahoma",
fontWeight: "normal",
//color: "#0000CC",
textOutline: "none"
},
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
},
series: [
{
type: "column",
name: "ELR",
//marker: { enabled: false },
colorByPoint: false,
zIndex: 1,
data: elrData
},
{
type: "line",
name: "D-Ratio",
color: "#336699",
marker: { enabled: false },
colorByPoint: false,
zIndex: 2,
data: dRatioData
}
]
}
};
exporter.initPool();
exporter.export(exportSettings, function (err, res)
{
callback(null, res.data);
exporter.killPool();
process.exit(1);
});
};