JSFiddle - React, Tailwind, and code Playground
by Purva Kshatriya
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.src.js"></script>
<script src="http://code.highcharts.com/modules/treemap.src.js"></script>
<div id="container"></div>
JavaScript
$(function () {
$('#container').highcharts({
legend:{
enabled:true
},
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,
colorValue:5
}, {
name: 'Rick',
parent: 'A',
value: 3,
colorValue:3
}, {
name: 'Peter',
parent: 'A',
value: 4,
colorValue:4
}, {
name: 'Anne',
parent: 'B',
value: 4,
colorValue:4
}, {
name: 'Rick',
parent: 'B',
value: 10,
colorValue:10
}, {
name: 'Peter',
parent: 'B',
value: 1,
colorValue:1
}, {
name: 'Anne',
parent: 'O',
value: 1,
colorValue:1
}, {
name: 'Rick',
parent: 'O',
value: 3,
colorValue:3
}, {
name: 'Peter',
parent: 'O',
value: 3,
colorValue:3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
/* colorAxis:{
/* dataClasses: [{
from:0,
to:5,
name: 'Apples',
color: 'red'
}]*/
// },
title: {
text: 'Fruit...