JavaScript TreeMap Chart Color Axis

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A treemap chart displays hierarchical (tree-structured) data as a set of nested rectangles. To create a treemap chart using KoolChart's JavaScript charting library, the <TreeMapChart> and <TreeMapSeries> elements must be set in Layout.

In this JavaScript chart example, a <ColorAxis> element is set in order to display the color axis in the legend.
<TreeMapChart showDataTips="true" buttonMode="true">
<colorAxis>
<ColorAxis id="colorAxis" maximum="400" minimum="0" interval="100" colors="[#fcd26b,#cc3635]" />
</colorAxis>
<series>
<TreeMapSeries weightField="Vancouver" showGroupHeader="true" groupField="items" displayName="tree" groupHeaderFontColor="#555555" groupNameField="name" nameField="Month" labelPosition="inside">
...
</TreeMapSeries>
</series>
</TreeMapChart>