Tree map with levels
Highcharts.chart('container', { series: [{ type: 'treemap', name: 'Norge', allowTraversingTree: true, alternateStartingDirection: true, dataLabels: { format: '{point.name}', style: { textOutline: 'none' } }, borderColor: '#ffffff', borderRadius: 3, nodeSizeBy: 'leaf', levels: [{ level: 1, layoutAlgorithm: 'sliceAndDice', groupPadding: 3, dataLabels: { headers: true, enabled: true, style: { fontSize: '0.6em', fontWeight: 'normal', textTransform: 'uppercase' } }, borderRadius: 3, borderWidth: 1, colorByPoint: true }, { level: 2, dataLabels: { enabled: true, inside: false } }], data: [{ id: 'A', name: 'Nord-Norge', color: '#50FFB1' }, { id: 'B', name: 'Trøndelag', color: '#F5FBEF' }, { id: 'C', name: 'Vestlandet', color: '#A09FA8' }, { id: 'D', name: 'Østlandet', color: '#E7ECEF' }, { id: 'E', name: 'Sørlandet', color: '#A9B4C2' }, { name: 'Troms og Finnmark', parent: 'A', value: 70923 }, { name: 'Nordland', parent: 'A', value: 35759 }, { name: 'Trøndelag', parent: 'B', value: 39494 }, { name: 'Møre og Romsdal', parent: 'C', value: 13840 }, { name: 'Vestland', parent: 'C', value: 31969 }, { name: 'Rogaland', parent: 'C', value: 8576 }, { name: 'Viken', parent: 'D', value: 22768 }, { name: 'Innlandet', parent: 'D', value: 49391 }, { name: 'Oslo', parent: 'D', value: 454 }, { name: 'Vestfold og Telemark', parent: 'D', value: 15925 }, { name: 'Agder', parent: 'E', value: 14981 }] }], title: { text: 'Norwegian regions and counties by area', align: 'left' }, subtitle: { text: 'Source: <a href="https://snl.no/Norge" target="_blank">SNL</a>', align: 'left' }, tooltip: { useHTML: true, pointFormat: 'The area of <b>{point.name}</b> is \ <b>{point.value} km<sup>2</sup></b>' } });
CoreHeat and tree maps
Install with NPM
The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages.
npm install highcharts --save
See more installation optionsDownload our library
The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.
DownloadBuy a license
You can download and try out all Highcharts products for free. Once your project/product is ready for launch, purchase a commercial license.
See License Pricing