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.
jhaile
shared this idea
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/
-
Michael
commented
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.
-
sahba
commented
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
@Tom
You can use the value to change the url to the image:
http://jsfiddle.net/8FSp6/35/ -
Tom
commented
Is it possible to use different images for each label? I'm assuming the label characteristic would have an array?
-
jhaile
commented
Yep - that fixed it. Thanks!
-
It seems to work when you add a valid CSS width, '150px': http://jsfiddle.net/highcharts/LJbPT/3/
-
jhaile
commented
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
-
jhaile
commented
OK - upgrading to 2.1.9 did the trick. Thanks!
-
jhaile
commented
It's also not working for me. Is this because you are including testing.js? What is that?
-
jhaile
commented
Thanks Torstein - don't see that documented here:
http://www.highcharts.com/ref/#xAxis-labels