FusionCharts - Gallery Example - TreeMap Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- Treemap chart showing Best-Selling Car Manufacturers in Europe.

Click nodes to traverse up and down the treemap. After the chart is traversed down once, the Back to Parent and Back to Top buttons, in the top-right corner, can be used for traversing up. 
 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var visitChart = new FusionCharts({
    type: 'treemap',
    renderAt: 'chart-container',
    width: '700',
    height: '550',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Top-selling car manufacturers",
        "subcaption": "Europe - 2015",
        "animation": "0",
        "plotToolText": "<div><b>$label</b><br/><b>Cars Sold: </b>$datavalue<br/><b>Growth: </b>$svalue%</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "b3b3b3",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "showLegend": "1",
        "legendpadding": "0",
        "legenditemfontcolor": "4b4b4b",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "legendCaptionFontBold": "1",
        "legendspreadfactor": ".7",
        "legendaxisbordercolor": "bfbfbf",
        "labelFontColor": "000000",
        "labelFontSize": "9",
        "showchildlabels": "1",
        "algorithm": "sliceanddice",
        "slicingmode": "vertical",
        "theme": "fusion",
        "legendCaption": "Growth in sales - Compared to previous year"
      },
      "data": [{
        "label": "Manufacturers",
        "value": "10639578",
        "fillcolor": "#999999",
        "data": [{
          "label": "Toyota Group",
          "value": "458560",
          "svalue": "7.6",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Lexus",
            "value": "29274",
            "svalue": "27.1"
          }, {
            "label": "Toyota",
            "value": "429286",
            "svalue": "1.1"
          }]
        }, {
          "label": "Renault Group",
          "value": "1009047",
          "svalue": "7.9",
          "fillcolor": "#cccccc",
          "data": [{
            "label": "Renault",
            "value": "720197",
            "svalue": "4.6"
          }, {
            "label":...