Search code examples
imageaxisamchartsaxis-labelsamcharts4

Amcharts4: How to add an image to an axis (valueAxis) label?


With amcharts4, I would like to add an image to a ValueAxis's label. Is this possible? I've found out, how to add an SVG image to a bullet (see demo). But is it possible to do something similar with the label of the ValueAxis?

Here is an example of such an image, I would like to add next to the number:

Currently, the value axis looks like this and it should have an icon next to the label:


EDIT:

Thanks to @zeroin's answer, I found a solution. However, there seems to be a strange bug when using an axis bullet with a template. Not every bullet is hidden even though its label is hidden. Here's the relevant code, a screenshot and a codepen to reproduce.

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 800;
valueAxis.renderer.minGridDistance = 30;
valueAxis.renderer.opposite = true;
valueAxis.renderer.labels.template.dx = 13;
valueAxis.strictMinMax = true;

var image = new am4core.Image();
image.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/man-user.svg";
image.width = 12;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
image.dx = 13;
image.dy = -0.5;
image.opacity = 0.3;
valueAxis.dataItems.template.bullet = image;

EDIT2:

This bug seems to be fixed in the current release of amcharts (4.5.14). It works now as expected.


Solution

  • Your question is right on time - in a version released today (4.5.9) we added bullet property to AxisDataItem. So you can add image or any other sprite to all axis labels via template or create axis range at a value you need and add bullet there, like:

    var range = valueAxis.axisRanges.create();
    range.value = 1500;
    //range.label.text = "1500";
    
    var image = new am4core.Image();
    image.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/man-user.svg";
    image.width = 15;
    image.horizontalCenter = "middle";
    image.verticalCenter = "middle";
    image.dx = -55;
    range.bullet = image;
    

    https://codepen.io/team/amcharts/pen/JgXqvp