Treemap Mixed charts

Treemap Mixed charts

by 200313

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>

<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://github.highcharts.com/modules/drilldown.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {

    series: [{
        type: "treemap",
        layoutAlgorithm: 'stripes',
        alternateStartingDirection: true,
        levels: [{
            level: 1,
            //layoutAlgorithm: 'sliceAndDice',
            dataLabels: {
                enabled: true,
                align: 'left',
                verticalAlign: 'top',
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold'
                }
            }
        }],
        data: [{
            id: 'A',
            name: 'Apples',
            color: "#EC2500"
        }, {
            id: 'B',
            name: 'Bananas',
            color: "#ECE100"
        }, {
            id: 'O',
            name: 'Oranges',
            color: '#EC9800'
        }, {
            name: 'Anne',
            parent: 'A',
            value: 5
        }, {
            name: 'Rick',
            parent: 'A',
            value: 3
        }, {
            name: 'Peter',
            parent: 'A',
            value: 4
        }, {
            name: 'Anne',
            parent: 'B',
            value: 4
        }, {
            name: 'Rick',
            parent: 'B',
            value: 10,
            drilldown: 'BRickSales'
        }, {
            name: 'Peter',
            parent: 'B',
            value: 1
       
        }, {
            name: 'Susanne',
            parent: 'Kiwi',
            value: 2,
            color: '#9EDE00'
        }]
    }],
    
    
     drilldown: {
      series: [{
        name: 'Ricks quotes',
        id: 'BRickSales',
        type: 'column',
        data: [
          
          ['v11', 30],
          ['v8', 17],
          ['v9', 8],
          ['v10', 5],
          ['v7', 3]
        ]
      }, {
        name: 'Rick Calls',
        id: 'BRickSales X',
        type: 'spline',
        yAxis: 1,
        data: [
          ['v11', 50],
          ['v8', 40],
          ['v9', 60],
          ['v10', 65],
          ['v7', 73]
   ...