Highcharts Tree Map with Color Axis Example

Keywords : Treemap with color axis using highcharts, How to use highcharts to create tree map with color axis example, Change the color of axis in tree map using highcharts with example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - Tree map with color axis Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <script src="https://code.highcharts.com/modules/treemap.js"></script>
    <script type="text/javascript">
        $(function () {
            var chartcoloraxis = {
                minColor: '#FFFFFF',
                maxColor: Highcharts.getOptions().colors[0]
            }
            var chartseries = [{
                type: 'treemap',
                layoutAlgorithm: 'squarified',
                data: [{
                    name: 'A',
                    value: 6,
                    colorValue: 1
                }, {
                    name: 'B',
                    value: 6,
                    colorValue: 2
                }, {
                    name: 'C',
                    value: 4,
                    colorValue: 3
                }, {
                    name: 'D',
                    value: 3,
                    colorValue: 4
                }, {
                    name: 'E',
                    value: 2,
                    colorValue: 5
                }, {
                    name: 'F',
                    value: 2,
                    colorValue: 6
                }, {
                    name: 'G',
                    value: 1,
                    colorValue: 7
                }]
            }]
            var chartitle = {
                text: 'Highcharts Treemap'
            }
            $('#container').highcharts({
                title: chartitle,
                colorAxis: chartcoloraxis,
                series: chartseries
            });
        });
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

Highcharts Tree Map with Color Axis Example

Example

Result