☰

treemap

Configuration Structure

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,
}

plotOptions

enableShades

Default: true

Enable different shades of color depending on the value

shadeIntensity

Default: 0.5

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

reverseNegativeShade

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.

distributed

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.

useFillColorAsStroke

Default: false

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

dataLabels

format

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

colorScale

ranges

treemap.colorScale.ranges

from

treemap.colorScale.ranges.from

Value indicating range's upper limit

to

treemap.colorScale.ranges.to

Value indicating range's lower limit

color

treemap.colorScale.ranges.color

Background color to fill the range with.

foreColor

treemap.colorScale.ranges.foreColor

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

inverse

treemap.colorScale.inverse

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

min

treemap.colorScale.min

Specify the lower range for treemap color calculation.

max

treemap.colorScale.max

Specify the higher range for treemap color calculation.