Possible to recreate this bar chart with image overlays?

[Adam Griffiths]

I’m trying to create a bar chart that looks like this, with images placed between the y-axis labels and the bars. The images should stay in that white space at all screen sizes. I was able to reproduce this using a stacked bar chart to fake the white space, but the images pop out of place at screen sizes where the chart title extends across more than one line. Is there a way to adjust the image position based on the size of the headline? Or maybe there’s a better approach to this?

Thanks!

[Shashi Ranjan]

@foreignpolicy,

Please take a look at this JSFiddle.

—
Shashi Ranjan
Team CanvasJS

[Adam Griffiths]

Thanks! That seems promising, but it’s not working in my code the same way as in your JSFiddle. My icons move out of place the moment the screen is resized and they still move when the chart title extends across more than one line.

You can have a look here.

[Shashi Ranjan]

@foreignpolicy,

The JSFiddle you have shared doesn’t seem to be working. However, we are trying to reproduce the issue at our end and will get back to you at the earliest.

—
Shashi Ranjan
Team CanvasJS

[Adam Griffiths]

What about positioning the images to the left of the names in the y-axis? Would that be any easier?

[Shashi Ranjan]

@foreignpolicy,

Please take a look at this JSFiddle.

—
Shashi Ranjan
Team CanvasJS