Home > Docs > treemap

treemap

treemap: {
  enableShades: boolean,
  shadeIntensity: number,
  distributed: boolean,
  reverseNegativeShade: boolean,
  useFillColorAsStroke: boolean,
  dataLabels: { ... },
    format: 'scale' | 'truncate',
    minFontSize: number,
  borderRadius: number,
  colorScale: { ... },
    inverse: boolean,
    ranges: Array,
      from: number,
      to: number,
      color: string,
      foreColor: string,
      name: string,
    min: number,
    max: number,
    colorValue: string | ((datum: any, opts: object) => number),
    gradient: { ... },
      enabled: boolean,
      min: number,
      max: number,
      midpoint: number | null,
      symmetric: boolean,
      colors: string[],
      stops: Array,
        value: number,
        color: string,
    gradientLegend: ApexGradientLegend,
      enabled: boolean,
      width: number | string,
      height: number | string,
      thickness: number,
      align: 'start' | 'center' | 'end',
      stops: number,
      showLabels: boolean,
      showHoverValue: boolean,
      labelStyle: { ... },
        fontSize: string,
        fontFamily: string,
        colors: string,
      arrow: { ... },
        size: number,
        color: string,
      formatter: Function,
  nested: { ... },
    enabled: boolean,
    drilldownAsLevels: boolean,
  parents: { ... },
    padding: number,
    fill: string,
    fillOpacity: number,
    borderColor: string,
    borderWidth: number,
    borderRadius: number,
    hover: { ... },
      show: boolean,
      color: string,
      width: number,
    header: { ... },
      show: boolean,
      height: number,
      minWidth: number,
      align: 'left' | 'center' | 'right',
      offsetX: number,
      offsetY: number,
      showValue: boolean,
      formatter: Function,
      style: { ... },
        fontSize: string,
        fontFamily: string,
        fontWeight: number | string,
        color: string,
        background: string,
        cssClass: string,
    show: boolean | 'auto',
    tooltip: { ... },
      formatter: Function,
  levels: ApexTreemapLevel[],
    padding: number,
    fill: string,
    fillOpacity: number,
    borderColor: string,
    borderWidth: number,
    borderRadius: number,
    hover: { ... },
      show: boolean,
      color: string,
      width: number,
    header: { ... },
      show: boolean,
      height: number,
      minWidth: number,
      align: 'left' | 'center' | 'right',
      offsetX: number,
      offsetY: number,
      showValue: boolean,
      formatter: Function,
      style: { ... },
        fontSize: string,
        fontFamily: string,
        fontWeight: number | string,
        color: string,
        background: string,
        cssClass: string,
  zoom: { ... },
    enabled: boolean,
    breadcrumb: ApexBreadcrumb,
      show: boolean,
      position: 'top-left' | 'top-right',
      separator: string,
      rootLabel: string,
      offsetX: number,
      offsetY: number,
      formatter: Function,
  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,
}

treemap.nested.enabled

Default: true

Parent containers appear on their own as soon as the data carries children. Set false to force the flat two-level layout regardless.

Available Options:

true (default)
false

treemap.nested.drilldownAsLevels

Default: false

Read drilldown: '<id>' ids as extra levels of the hierarchy instead of as a click target for the drilldown feature.

Defaults to false, because on a treemap that id has always meant "descend on click".

Available Options:

true
false (default)

How a branch is drawn once the data is nested: the header strip, its label and padding. Accepts the same shape as a level. Per-depth overrides go in levels.

treemap.parents.show

Default: 'auto'

Whether branch containers are drawn.

Available Options:

'auto' (default): on when the data carries children.
true
false

treemap.parents.tooltip.formatter

Custom tooltip for a branch. Receives { name, value, depth, leafCount, percentOfParent, percentOfTotal, node, w } and returns an HTML string.

percentOfParent and percentOfTotal are the two questions a nested treemap actually raises, so they are passed rather than left to be derived.

Per-depth overrides of parents, indexed from the outermost group actually drawn (0 = the series, or the first authored level when a single series is unwrapped).

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

#enabled

#drilldownAsLevels

#parents

#show

#formatter

#levels

#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`

`enabled`

`drilldownAsLevels`

`parents`

`show`

`formatter`

`levels`

`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`