FusionCharts - Using images in annotations to render icons on x-axis

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- 
Using images in annotations to render icons on x-axis. 

    Element:
        Annotations
    Attribute:
        type - set to image
        url - the url of the image to load
 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'line',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Revenue by store managers",
        "subCaption": "Last quarter",
        "xAxisName": "Managers",
        "yAxisName": "Revenue (In USD)",
        "numberPrefix": "$",
        "canvasPadding": "30",
        "chartBottomMargin": "40",
        "theme": "fusion",
        //"LabelPadding": "80"
      },
      "annotations": {
        "groups": [{
          "id": "user-images",
          "items": [{
              "id": "jennifer-user-icon",
              "type": "image",
              "xScale": "15",
              "yScale": "12",
              "url": "http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png",
              "x": "$xaxis.label.0.STARTX-15",
              "y": "$canvasEndY+20"
            },
            {
              "id": "tom-user-icon",
              "xScale": "8",
              "yScale": "6",
              "type": "image",
              "url": "https://vignette.wikia.nocookie.net/disney/images/d/de/Pluto_transparent.png/revision/latest?cb=20160508181312",
              "x": "$xaxis.label.1.STARTX-15",
              "y": "$canvasEndY+25"
            }
          ]
        }]
      },
      "data": [{
          "label": "Mickey",
          "value": "92",
          "toolText": "<div><img height='50' width='50' src='http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Mickey-Mouse-PNG-Transparent-Image-1-500x575.png'></img></div>"
        },
        {
          "label": "Pluto",
          "value": "56",
          "toolText": "<div><img height='50' width='50' src='https://vignette.wikia.nocookie.net/disney/images/d/de/Pluto_transparent.png/revision/latest?cb=20160508181312'></img></div>"
        }
      ]
    }
  }).render();
});