Html TreeMap
Set the baseColor property of the jqxTreeMap. Author: http://jqwidgets.com
by jqwidgets
HTML
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="treemap"></div>
JavaScript
var data = [{
label: 'USA',
value: 104
}, {
label: 'People\'s Republic of China',
value: 88
}, {
label: 'Great Britain',
value: 65
}, {
label: 'Russian Federation',
value: 82
}, {
label: 'Germany',
value: 44
}, {
label: 'Republic of Korea',
value: 28
}, {
label: 'France',
value: 34
}, {
label: 'Italy',
value: 28
}, {
label: 'Hungary',
value: 17
}, {
label: 'Australia',
value: 35
}, {
label: 'Japan',
value: 38
}, {
label: 'Kazakhstan',
value: 13
}, {
label: 'Netherlands',
value: 20
}, {
label: 'Ukraine',
value: 20
}, {
label: 'New Zealand',
value: 13
}, {
label: 'Cuba',
value: 14
}
];
$('#treemap').jqxTreeMap({
width: 400,
height: 300,
source: data,
colorRange: 100,
colorMode: 'autoColors',
baseColor: '#52CBFF',
legendScaleCallback: function (v) {
v = v.toFixed(1);
return v;
},
legendLabel: 'Olympic medal count - London 2012'
});