Creating a drill-down column chart

Martynas Majeris -

Let's implement a very basic drill-down scenario for the column charts.

First of all, let's set up the data:

var chartData = [
  { country: "USA", visits: 4025 },
  { country: "China", visits: 1882 },
  { country: "Japan", visits: 1809},
  { country: "Germany", visits: 1322}


Now let's add a second-level of the data to our friends in the United States. Let's say when we click on the USA column we want to break down the visits by State. I'm adding a subdata property which contains array of data point objects, just the way we had for the first level:

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}


You with my so far? Good.

Now let's add an event listener to catch clicks on columns which would also verify if the column clicked does have a "subdata" property and drill-down to it if it has.

chart.addListener("clickGraphItem", function (event) {
  // let's look if the clicked graph item had any subdata to drill-down into
  if (event.item.dataContext.subdata != undefined) {
    // wow it has!
    // let's set that as chart's dataProvider
    event.chart.dataProvider = event.item.dataContext.subdata;


Now, it was easy, wasn't it?

Here's a working result of our joint effort above:


P.S. This approach does not limit us by just one level of drill-down. A data point for, say, "Illinois" can contain "subdata" array of it's own, which would be used to populate the chart if someone clicked on that state's column.

Have more questions? Submit a request


  • Avatar
    Jinesh Patel

    Hi, this article was quite useful! I was looking for a similar thing here! Thanks. My only doubt was, can we go back to the previous data-point after a drill down on a particular column? If yes, please post about how it can be done. 

    Thanks in advance! 

  • Avatar

    I'm using this chart and find it wonderful. May I know how I can add more than 1 data set as comparison to the existing data set? That means the amcharts incorporates the "multiple data sets" selection and "drill down" features. Thanks!

Powered by Zendesk