Icons in Amcharts

Question

I was wondering if there is an easy way to add images/icons somewhere in the chart (given by x and y coordinates).

Im quite new to javascript and amcharts (am4charts) and any help would much be appreciated!

I tried several hits here on stackoverflow (e.g. amChart CategoryAxes with icons) - but this did not help me much.

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = generatechartData();;

function generatechartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate( firstDate.getDate() - 150 );
    var visits = 0;
    var values = 0;
    var secondline = 0;
    var b = 0.6;
    for ( var i = 0; i < 450; i++ ) {
          var newDate = new Date( firstDate );
          newDate.setDate( newDate.getDate() + i );
    if(i > 80){
          b = 0.4;
    }
    visits += Math.round((Math.random()<b?1:-1)*Math.random()*10);
    values += 0;    
    secondline += (Math.round((Math.random()<b?1:-1)*Math.random()*10))*0.5;

    if(i==0){visits = 0;values = 0; secondline =0;}

    chartData.push( {date: newDate, visits: visits, values: values, secondline: secondline} );
   }
    return chartData;
}

'''

Mike Lambert Mike Lambert · Accepted Answer · 2019-09-11T12:11:10

You can find the detailed Documentation on Custom Bullets here: https://www.amcharts.com/docs/v4/concepts/bullets/#Using_images_as_bullets

Basicly you just create a customized Bullet Object and add it to the lineSeries in which you want to use it.

Here's the example Code from the Documentation:

var bullet = lineSeries.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.href = "/path/to/image/star.svg";
image.width = 30;
image.height = 30;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";

Icons in Amcharts

1 Answers