treemap

treemap: {
  enableShades: boolean,
  shadeIntensity: number,
  distributed: boolean,
  reverseNegativeShade: boolean,
  useFillColorAsStroke: boolean,
  dataLabels: { ... },
    format: 'scale' | 'truncate',
  borderRadius: number,
  colorScale: { ... },
    inverse: boolean,
    ranges: Array,
      from: number,
      to: number,
      color: string,
      foreColor: string,
      name: string,
    min: number,
    max: number,
  seriesTitle: { ... },
    show: boolean,
    offsetY: number,
    offsetX: number,
    borderColor: string,
    borderWidth: number,
    borderRadius: number,
    style: { ... },
      background: string,
      color: string,
      fontSize: string,
      fontFamily: string,
      fontWeight: number | string,
      cssClass: string,
      padding: { ... },
        left: number,
        right: number,
        top: number,
        bottom: number,
}

Default: true

Enable different shades of color depending on the value

Default: 0.5

The intensity of the shades generated for each value
Accepts from 0 to 1

Default: true

When enabled, it will reverse the shades for negatives but keep the positive shades as it is now. An example of such use-case would be in a profit/loss chart where darker reds mean larger losses, darker greens mean larger gains.

Default: false

When turned on, each series in a treemap will have it's own lowest and highest range and colors will be shaded for each series. Default value is false.

Default: false

When turned on, the stroke/border around the treemap cell has the same color as the cell color.

Default: 0

Rounds the corners of every treemap tile. Set to 0 for square corners.

Header label rendered at the top of each series' treemap region. Useful in multi-series treemaps to identify which group each tile cluster belongs to.

treemap.seriesTitle.show

Show or hide the series title bar.

treemap.seriesTitle.offsetX

Left offset for the series title.

treemap.seriesTitle.offsetY

Top offset for the series title.

treemap.seriesTitle.borderColor

Border color around the series title.

treemap.seriesTitle.borderWidth

Border width around the series title.

treemap.seriesTitle.borderRadius

Border radius applied to the corners of the series title background.

treemap.seriesTitle.style

Text styling for the series title.

treemap.seriesTitle.style.background

Background color of the series title bar.

treemap.seriesTitle.style.color

Text color of the series title.

treemap.seriesTitle.style.fontSize

Font size of the series title.

treemap.seriesTitle.style.fontFamily

Font family of the series title.

treemap.seriesTitle.style.fontWeight

Font weight of the series title.

treemap.seriesTitle.style.cssClass

Optional CSS class added to the series title element for custom styling.

treemap.seriesTitle.style.padding

Padding applied around the series title text.

treemap.seriesTitle.style.padding.left

Left padding of the series title.

treemap.seriesTitle.style.padding.right

Right padding of the series title.

treemap.seriesTitle.style.padding.top

Top padding of the series title.

treemap.seriesTitle.style.padding.bottom

Bottom padding of the series title.

treemap.dataLabels.format

You can either set the labels to scale based on the box size, or you can keep the same font-dize and let the labels truncate if they exceed the area. Below are the available options:

scale
truncate

treemap.colorScale.ranges

treemap.colorScale.ranges.from

Value indicating range's upper limit

treemap.colorScale.ranges.to

Value indicating range's lower limit

treemap.colorScale.ranges.color

Background color to fill the range with.

treemap.colorScale.ranges.foreColor

Fore Color of the text if data-labels is enabled.

treemap.colorScale.inverse

In a multiple series treemap, flip the color-scale to fill the treemaps vertically instead of horizontally.

treemap.colorScale.min

Specify the lower range for treemap color calculation.

treemap.colorScale.max

Specify the higher range for treemap color calculation.

treemap

Configuration Structure

`plotOptions`

`enableShades`

`shadeIntensity`

`reverseNegativeShade`

`distributed`

`useFillColorAsStroke`

`borderRadius`

`seriesTitle`

`show`

`offsetX`

`offsetY`

`borderColor`

`borderWidth`

`borderRadius`

`style`

`background`

`color`

`fontSize`

`fontFamily`

`fontWeight`

`cssClass`

`padding`

`left`

`right`

`top`

`bottom`

`dataLabels`

`format`

`colorScale`

`ranges`

`from`

`to`

`color`

`foreColor`

`inverse`

`min`

`max`

treemap

Configuration Structure

#plotOptions

#enableShades

#shadeIntensity

#reverseNegativeShade

#distributed

#useFillColorAsStroke

#borderRadius

#seriesTitle

#show

#offsetX

#offsetY

#borderColor

#borderWidth

#borderRadius

#style

#background

#color

#fontSize

#fontFamily

#fontWeight

#cssClass

#padding

#left

#right

#top

#bottom

#dataLabels

#format

#colorScale

#ranges

#from

#to

#color

#foreColor

#inverse

#min

#max

`plotOptions`

`enableShades`

`shadeIntensity`

`reverseNegativeShade`

`distributed`

`useFillColorAsStroke`

`borderRadius`

`seriesTitle`

`show`

`offsetX`

`offsetY`

`borderColor`

`borderWidth`

`borderRadius`

`style`

`background`

`color`

`fontSize`

`fontFamily`

`fontWeight`

`cssClass`

`padding`

`left`

`right`

`top`

`bottom`

`dataLabels`

`format`

`colorScale`

`ranges`

`from`

`to`

`color`

`foreColor`

`inverse`

`min`

`max`