Take a look at this code snippet: http://jsfiddle.net/ouLed1fp/
How can I create a legend entry for each column in the chart? Also, is there a way to display the column names next to them, providing a clear legend?
<div id="chartdiv" style="width: 100%; height: 355px;"></div> <script> var chart; var chartData = [{ country: "USA", visits: 4025, subdata: [ { country: "New York", visits: 1000 }, { country: "California", visits: 785 }, { country: "Florida", visits: 501 }, { country: "Illinois", visits: 321 }, { country: "Washington", visits: 101 } ]}, { country: "China", visits: 1882}, { country: "Japan", visits: 1809}, { country: "Germany", visits: 1322}]; AmCharts.ready(function() { // SERIAL CHART chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = "country"; chart.startDuration = 1; // AXES // category var categoryAxis = chart.categoryAxis; categoryAxis.labelRotation = 90; categoryAxis.gridPosition = "start"; // value // in case you don't want to change default settings of value axis, // you don't need to create it, as one value axis is created automatically. // GRAPH var graph = new AmCharts.AmGraph(); graph.valueField = "visits"; graph.balloonText = "[[category]]: [[value]]"; graph.type = "column"; graph.lineAlpha = 0; graph.fillAlphas = 0.8; chart.addGraph(graph); chart.addListener("clickGraphItem", function (event) { // check if the clicked graph item has any subdata to drill-down into if (event.item.dataContext.subdata != undefined) { event.chart.dataProvider = event.item.dataContext.subdata; event.chart.validateData(); } }); var legend = new AmCharts.AmLegend(); chart.addLegend(legend, "legenddiv"); chart.write("chartdiv"); }); </script>