Chart is not exporting when svg images are placed on the x-axis labels

Hi Team ,

am using high-chart-exporter server 3.1.1 and trying to render svg image on the x-axis label but it failed to do , this is my chart config and am expecting the chart something like this .
This is working when just place text labels ?


```
{
"chart": {
"style": {
"fontFamily": "DINPro, Arial",
"fontSize": "12px",
"fill": "#666",
"color": "#666"
},
"spacingBottom": 2,
"spacingLeft": 0,
"backgroundColor": null,
"type": "area",
"polar": true,
"spacing": [
35,
30,
30,
30
],
"animation": {}
},
"title": {
"text": "",
"align": "left",
"widthAdjust": 0,
"style": {
"color": "#2b2b2b",
"fontSize": "14px",
"fill": "#2b2b2b"
},
"margin": 20
},
"legend": {
"style": {
"fontSize": "11px"
},
"itemStyle": {
"align": "left",
"fontSize": "12px",
"fontWeight": "normal",
"fill": "#2b2b2b",
"color": "#2b2b2b",
"textOverflow": null,
"overflow": null,
"padding": 0
},
"itemMarginTop": 8,
"verticalAlign": "bottom",
"align": "center",
"alignColumns": false,
"enabled": true,
"margin": 50
},
"credits": {
"enabled": false,
"text": "Mintel",
"href": ""
},
"plotOptions": {
"series": {
"states": {
"inactive": {
"opacity": 1
},
"hover": {
"enabled": false
}
},
"events": {},
"point": {
"events": {}
},
"area": {
"fillOpacity": 0.5,
"tooltip": {
"headerFormat": "{point.point.xLabel}
"
}
},
"marker": {
"radius": 2
},
"dataLabels": {
"style": {
"color": "contrast",
"fontSize": "11px"
}
},
"animation": {}
},
"line": {
"tooltip": {
"headerFormat": "{point.point.xLabel}
"
}
},
"area": {
"tooltip": {
"headerFormat": "{point.point.xLabel}
"
},
"fillOpacity": 0.15
},
"heatmap": {
"borderWidth": 1,
"borderColor": "#fff",
"nullColor": "#fff",
"states": {
"hover": {
"borderWidth": 3
}
}
}
},
"xAxis": {
"labels": {
"y": -13,
"style": {
"paddingTop": "0px",
"fontSize": "11px"
},
"distance": 45,
"align": "center",
"__values": [
"\n

",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n"
],
"useHTML": true
},
"title": {
"margin": 20,
"style": {
"fontSize": "12px"
},
"color": "#666",
"text": null
},
"lineColor": "#ccc",
"tickColor": "#ccc",
"gridLineDashStyle": "longdash",
"tickInterval": 1
},
"yAxis": {
"labels": {
"style": {
"paddingRight": "60px",
"textOverflow": "none",
"lineHeight": "12",
"fontSize": "11px"
},
"format": "{value}%"
},
"maxPadding": 0.0001,
"title": {
"margin": 20,
"style": {
"fontSize": "12px"
},
"color": "#666",
"text": null
},
"lineColor": "#ccc",
"tickColor": "#ccc",
"tickInterval": 20,
"min": 0,
"max": 100,
"startOnTick": false,
"endOnTick": false
},
"tooltip": {
"backgroundColor": null,
"borderColor": "#939393",
"borderRadius": 4,
"headerFormat": "{point.key}
",
"hideDelay": 200,
"shadow": true,
"style": {
"fontSize": "13px",
"fill": "#2b2b2b",
"color": "#2b2b2b",
"lineHeight": "20px",
"pointerEvents": "auto"
},
"outside": true,
"useHTML": true,
"borderWidth": null
},
"exporting": {
"enabled": false,
"useHTML": true,
"buttons": {
"contextButton": {
"menuItems": [
"downloadCSV"
]
}
}
},
"lang": {
"noData": null
},
"series": [
{
"name": "Primary Group",
"data": [
{
"y": 53.5,
"x": 0,
"xLabel": {
"label": "Premium",
"icon": "premium"
}
},
{
"y": 63.5,
"x": 1,
"xLabel": {
"label": "Tasty",
"icon": "tasty"
}
},
{
"y": 41.7,
"x": 2,
"xLabel": {
"label": "Good Value",
"icon": "good_value"
}
},
{
"y": 35.9,
"x": 3,
"xLabel": {
"label": "Exciting",
"icon": "exciting"
}
},
{
"y": 33.5,
"x": 4,
"xLabel": {
"label": "Fun",
"icon": "fun"
}
},
{
"y": 30.2,
"x": 5,
"xLabel": {
"label": "Appealing Packaging",
"icon": "appealing_packaging"
}
},
{
"y": 22.8,
"x": 6,
"xLabel": {
"label": "Natural",
"icon": "natural"
}
},
{
"y": 44.2,
"x": 7,
"xLabel": {
"label": "Environmentally Friendly",
"icon": "environmental"
}
},
{
"y": 44.1,
"x": 8,
"xLabel": {
"label": "Trustworty Brand",
"icon": "trustworthy"
}
},
{
"y": 56.3,
"x": 9,
"xLabel": {
"label": "Unique",
"icon": "unique"
}
},
{
"y": 43.2,
"x": 10,
"xLabel": {
"label": "Convenient",
"icon": "convenient"
}
},
{
"y": 44.2,
"x": 11,
"xLabel": {
"label": "Filling",
"icon": "filling"
}
},
{
"y": 37.7,
"x": 12,
"xLabel": {
"label": "Healthy",
"icon": "healthy"
}
},
{
"y": 47.2,
"x": 13,
"xLabel": {
"label": "Indulgent Treat",
"icon": "indulgent_treat"
}
},
{
"y": 42.1,
"x": 14,
"xLabel": {
"label": "Quality",
"icon": "quality"
}
},
{
"y": 35.9,
"x": 15,
"xLabel": {
"label": "Refreshing",
"icon": "refreshing"
}
}
]
},
{
"name": "Benchmark Group",
"data": [
{
"y": 40.5,
"x": 0,
"xLabel": {
"label": "Premium",
"icon": "premium"
}
},
{
"y": 63.5,
"x": 1,
"xLabel": {
"label": "Tasty",
"icon": "tasty"
}
},
{
"y": 23,
"x": 2,
"xLabel": {
"label": "Good Value",
"icon": "good_value"
}
},
{
"y": 27.2,
"x": 3,
"xLabel": {
"label": "Exciting",
"icon": "exciting"
}
},
{
"y": 33.5,
"x": 4,
"xLabel": {
"label": "Fun",
"icon": "fun"
}
},
{
"y": 29.7,
"x": 5,
"xLabel": {
"label": "Appealing Packaging",
"icon": "appealing_packaging"
}
},
{
"y": 36.3,
"x": 6,
"xLabel": {
"label": "Natural",
"icon": "natural"
}
},
{
"y": 32.7,
"x": 7,
"xLabel": {
"label": "Environmentally Friendly",
"icon": "environmental"
}
},
{
"y": 44.8,
"x": 8,
"xLabel": {
"label": "Trustworty Brand",
"icon": "trustworthy"
}
},
{
"y": 43.9,
"x": 9,
"xLabel": {
"label": "Unique",
"icon": "unique"
}
},
{
"y": 36,
"x": 10,
"xLabel": {
"label": "Convenient",
"icon": "convenient"
}
},
{
"y": 44.2,
"x": 11,
"xLabel": {
"label": "Filling",
"icon": "filling"
}
},
{
"y": 31,
"x": 12,
"xLabel": {
"label": "Healthy",
"icon": "healthy"
}
},
{
"y": 49.7,
"x": 13,
"xLabel": {
"label": "Indulgent Treat",
"icon": "indulgent_treat"
}
},
{
"y": 31.7,
"x": 14,
"xLabel": {
"label": "Quality",
"icon": "quality"
}
},
{
"y": 42.1,
"x": 15,
"xLabel": {
"label": "Refreshing",
"icon": "refreshing"
}
}
]
}
],
"palette": "blueOrange",
"colors": [
"#026fd9",
"#e66723"
],
"noData": {
"style": {
"textAlign": "center"
},
"useHTML": true
}
}
```