Apply Background Image to A Column - highcharts

Question

I am using Highcharts to create a column chart with two data points. There's only one series. I am using styling to make each column a different color, but I would also like to add a background image behind each column. I've tried using pattern fill, but it repeats the image for the whole area of the column, whereas I just need a single 30x30 image at the bottom of each column. I also tried using chart.renderer.image to add the svg image and managed to position it well, but can't make the image responsive (chart will be viewed on tablets and mobile devices in addition to computer screens).
My chart details are below:
const categoryColors = {
'cat1': '#ff9800',
'cat2': '#8256ce'
};
Highcharts.chart('gap_bar_chart', {
chart: {
type: 'column'
},
title: {
text: null
},
xAxis: {
categories: ['cat1','cat2'],
labels: {
useHTML: true,
formatter: function () {
console.log(this);
return '<span style="color: ' +categoryColors[this.value] + '">'+this.value+'</span>';
}
},
},
yAxis: {
min: 0,
title: {
useHTML: true,
text: '<b>Percent Earning Junior Status</b>'
},
labels: {
format: "{value} %"
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent'
},
tooltip: {
headerFormat: '<table><tr><th>Percent of Students Earning Junior Status within 2 Years</th></tr><tr><th><hr/></th></tr>',
pointFormat: '<tr><td><b>{point.name}</b>: {point.y: .0f}% ({point.numberStr} students)</td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
legend: {
enabled: false
},
series: [{
data: [
{
y: chartData.p_jun2yr_nongap*100 || 0,
total: chartData.n_jun2yr_nongap,
color: '#FCCA7D',
category: 'Non-URM',
name: 'Non-URM',
numberStr: chartData.n_jun2yr_nongap.toLocaleString()
},
{
y: chartData.p_jun2yr_gap*100 || 0,
total: chartData.n_jun2yr_gap,
color: '#9675CF',
category: 'cat2',
name: 'cat2',
numberStr: chartData.n_jun2yr_gap.toLocaleString()
}
]
}]
});
Here is what I would like to accomplish: https://imgur.com/a/oTG34G6

Answer 1

In render event you can use Highcharts.SVGRenderer.image to add the image and make its position and size dynamically dependent on the column:
events: {
render: function() {
var chart = this,
shape,
points = this.series[0].points;
if (chart.customImages) {
chart.customImages.forEach(function(el) {
el.destroy();
});
chart.customImages.length = 0;
} else {
chart.customImages = [];
}
points.forEach(function(p) {
shape = p.shapeArgs;
chart.customImages.push(
chart.renderer.image(
'https://www.highcharts.com/samples/graphics/sun.png',
shape.x + chart.plotLeft + shape.width / 2 - shape.width / 2,
shape.y + chart.plotTop + shape.height - shape.width,
shape.width,
shape.width
).attr({
zIndex: 3
}).add()
);
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/eLwv9ruh/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image