Column chart with images on top
by Rogério Saraceni
HTML
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
CSS
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 500px;
}
JavaScript
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"name": "Gestão",
"points": 35654,
"color": chart.colors.next(),
"bullet": "https://upload.wikimedia.org/wikipedia/en/e/e5/Yellow_Star.png"
}, {
"name": "Gente",
"points": 65456,
"color": chart.colors.next(),
"bullet": "https://upload.wikimedia.org/wikipedia/en/e/e5/Yellow_Star.png"
}, {
"name": "Gestão Pedagógica",
"points": 45724,
"color": chart.colors.next(),
"bullet": "https://upload.wikimedia.org/wikipedia/en/e/e5/Yellow_Star.png"
}, {
"name": "Comercial e Marketing",
"points": 13654,
"color": chart.colors.next(),
"bullet": "https://upload.wikimedia.org/wikipedia/en/e/e5/Yellow_Star.png"
}, {
"name": "Administração e Finanças",
"points": 13654,
"color": chart.colors.next(),
"bullet": "https://upload.wikimedia.org/wikipedia/en/e/e5/Yellow_Star.png"
}, {
"name": "Infra. e Tecnologia",
"points": 15000,
"color": chart.colors.next(),
"bullet": "https://upload.wikimedia.org/wikipedia/en/e/e5/Yellow_Star.png"
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.minGridDistance = 50;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.fill = am4core.color("#fff");
categoryAxis.renderer.labels.template.fontSize = 12;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.strokeDasharray =...