Allow images to be included in axis labels
Provide some way of including an image in an axis label. For example, I may want to prefix the axis labels with an icon.
I've tried including HTML in the axis label and using axis.labels.formatter to add image HTML into the label. Neither worked. I've seen reference to using renderer for doing this, but I haven't been able to find an example.
The key is setting useHTML to true: http://jsfiddle.net/highcharts/8FSp6/.
Here’s another approach, allowing true SVG images: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/axis-label-images/. The advantage of using SVG is that these images willl be visible in the exported chart as well.
Hi Michael, I've updated the snippet to a more general approach that looks at the label's actual position. Now it also works with polar. You may want to adjust the exact positions though: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/studies/axis-label-images/
Using the SVG approach, is there a way to achieve the same with polar coordinates?
@sahba: It looks like the original fiddle got lost, so I created a new one. Let me know if you have any problems with it, we will keep the snippet updated.
The second link doesn't work. As I am going to have an arrow pointing to the middle of y-axis and then generate a pdf using phantomJS, so need to have SVG. please guide how to have an image or arrow on y-axis.
Levi Page commented
You can use the value to change the url to the image:
Is it possible to use different images for each label? I'm assuming the label characteristic would have an array?
Yep - that fixed it. Thanks!
It seems to work when you add a valid CSS width, '150px': http://jsfiddle.net/highcharts/LJbPT/3/
Torstein: I've found that setting useHTML to true breaks the wrapping of labels when they are aligned left. Since I'm aligning left, I had to set a margin and width for my labels. But setting useHTML ignores the width specified in my style:
Here's an example: http://jsfiddle.net/LJbPT/2/
And here's a forum post about my alignment problem in general: http://highslide.com/forum/viewtopic.php?f=9&t=14007&p=61248#p61248
OK - upgrading to 2.1.9 did the trick. Thanks!
It's also not working for me. Is this because you are including testing.js? What is that?
Thanks Torstein - don't see that documented here: