Drill-down Treemap

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.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

var data = {

  "Mitsubishi": { "i MiEV": 6, "Lancer": 12725, "MirageMirageMirage": 22386, "Outlander": 35310, "Outlander PHEV": 99, "Outlander Sport": 33160 },
  "Subaru": { "BRZ": 4131, "Crosstrek": 110138, "Forester": 177563, "Impreza": 117401, "Legacy": 49837, "Outback is really long name and": 188886 }
}

function processData(data) {
  var treeData = [];

  var smallBrands = { name: "Other", children: [] };

  for (var brand in data) {
    var brandData = { name: brand, children: [] }
    var brandTotal = 0;
    for (var model in data[brand]) {
      brandTotal += data[brand][model];
    }

    for (var model in data[brand]) {
      // do not add very small
      if (data[brand][model] > 100) {
        brandData.children.push({ name: model, count: data[brand][model] });
      }
    }

    // add to small brands if total number less than

    treeData.push(brandData);


  }

  return treeData;
}

// create chart
var chart = am4core.create("chartdiv", am4charts.TreeMap);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

// only one level visible initially
chart.maxLevels = 2;
// define data fields
chart.dataFields.value = "count";
chart.dataFields.name = "name";
chart.dataFields.children = "children";
chart.homeText = "US Car Sales 2017";

// enable navigation
chart.navigationBar = new am4charts.NavigationBar();

// level 0 series template
var level0SeriesTemplate = chart.seriesTemplates.create("0");
level0SeriesTemplate.strokeWidth = 2;

// by default only current level series bullets are visible, but as we need brand bullets to be visible all the time, we modify it's hidden...