Search code examples
javascriptamchartsdonut-chart

Image inside donut chart - AmCharts

I´m trying to put an image inside de inner radius of a pie chart. So it would look like this:

enter image description here

The closest thing I found is title and subtitle inside. But it produces a text tag inside de svg, so I couldn't find the way to show an image instead.

AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"allLabels": [{
    "text": "This is chart title",
    "align": "center",
    "bold": true,
    "y": 220
},{
    "text": "Ans here's the subtitle as well",
    "align": "center",
    "bold": false,
    "y": 250
}],
"dataProvider": [{
    "title": "New",
    "value": 4852
}, {
    "title": "Returning",
    "value": 9899
}],
"titleField": "title",
"valueField": "value",
"labelRadius": -130,
"radius": "42%",
"innerRadius": "60%",
"labelText": ""
});

Thanks!

Solution

  • Technically, it's not possible to add images as labels in amCharts Pie chart.

    However, you can easily work around that by adding that image as a background for chart container. I.e.:

    #chartdiv {
  width: 210px;
  height: 210px;
  background: transparent url(logo.png) no-repeat center 70px;
}

    Here's your chart with the above applied:

    var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "dataProvider": [{
    "slice": "First",
    "value": 34
  }, {
    "slice": "Second",
    "value": 66
  }],
  "valueField": "value",
  "titleField": "slice",
  "labelsEnabled": false,
  "pullOutRadius": 0,
  "innerRadius": 60,
  "allLabels": [{
    "text": "34%",
    "color": "#f40000",
    "size": 20,
    "align": "center",
    "y": "55%"
  }]
});
    #chartdiv {
  width: 210px;
  height: 210px;
  margin: 0 auto;
  background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/so1.png) no-repeat center 70px;
}
    <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>