Home > Docs > treemap

treemap

Configuration Structure

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

plotOptions

enabled

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

drilldownAsLevels

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)

parents

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.

show

treemap.parents.show
Default: 'auto'

Whether branch containers are drawn.

Available Options:

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

formatter

treemap.parents.tooltip.formatter

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

A branch's tooltip is its own element, beside the leaf tooltip, with the same classes plus apexcharts-treemap-tooltip, so CSS written for the chart's tooltip styles it too, and .apexcharts-treemap-tooltip targets branches alone.

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

levels

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).

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.

borderRadius

Default: 0

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

seriesTitle

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.

show

treemap.seriesTitle.show

Show or hide the series title bar.

offsetX

treemap.seriesTitle.offsetX

Left offset for the series title.

offsetY

treemap.seriesTitle.offsetY

Top offset for the series title.

borderColor

treemap.seriesTitle.borderColor

Border color around the series title.

borderWidth

treemap.seriesTitle.borderWidth

Border width around the series title.

borderRadius

treemap.seriesTitle.borderRadius

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

style

treemap.seriesTitle.style

Text styling for the series title.

background

treemap.seriesTitle.style.background

Background color of the series title bar.

color

treemap.seriesTitle.style.color

Text color of the series title.

fontSize

treemap.seriesTitle.style.fontSize

Font size of the series title.

fontFamily

treemap.seriesTitle.style.fontFamily

Font family of the series title.

fontWeight

treemap.seriesTitle.style.fontWeight

Font weight of the series title.

cssClass

treemap.seriesTitle.style.cssClass

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

padding

treemap.seriesTitle.style.padding

Padding applied around the series title text.

left

treemap.seriesTitle.style.padding.left

Left padding of the series title.

right

treemap.seriesTitle.style.padding.right

Right padding of the series title.

top

treemap.seriesTitle.style.padding.top

Top padding of the series title.

bottom

treemap.seriesTitle.style.padding.bottom

Bottom padding of the series title.

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.

name

treemap.colorScale.ranges.name

Label for this range in the legend. Without it the range is shown by its bounds.

colorValue

treemap.colorScale.colorValue

Colour a tile by a second metric, independent of the value that sizes it: area is how big something is, colour is how it did.

Reads datum.colorValue by default. Pass a key name to read a different property, or an accessor to compute one.

colorValue: function(datum, { seriesIndex, dataPointIndex, w }) { return datum.growth }

gradient

treemap.colorScale.gradient

Continuous interpolation between colour stops for the metric above, instead of the discrete buckets ranges gives.

Active as soon as any datum carries a colour metric. enabled: false opts out and true forces it on. ranges is unaffected and still applies wherever it is set.

gradientLegend

treemap.colorScale.gradientLegend

Continuous colour legend for that metric: a gradient strip with end labels and a hover indicator, shown in place of the categorical legend.

minFontSize

treemap.dataLabels.minFontSize

Skip a tile's label when it would render below this size in pixels. Defaults to 4; set 0 to label every tile regardless.

This is a performance control as much as a visual one. With format: 'scale' the font size follows the tile's area, so a dense treemap asks for a lot of text only a few pixels tall, and each label still has to be built and measured against the DOM. On a large chart that measurement dominates the render.

zoom

Click a group to fill the canvas with it, with a breadcrumb back.

Ignored when the drilldown feature is active on the same chart: both navigate the hierarchy, and drilldown owns the click there.

padding

treemap.parents.padding

Inset between a parent's edge and the children inside it. Defaults to 4.

fillOpacity

treemap.parents.fillOpacity

Opacity of the container fill.

borderColor

treemap.parents.borderColor

Border color of the container.

borderWidth

treemap.parents.borderWidth

Border width of the container.

borderRadius

treemap.parents.borderRadius

Corner radius of the container. Falls back to plotOptions.treemap.borderRadius.

hover

treemap.parents.hover

Outline drawn on the container on hover: { show, color, width }. show defaults to true.

header

treemap.parents.header

The strip at the top of a container carrying the branch's name.

Accepts show, height (default 22), minWidth (default 40, below which the strip is skipped because no name could be read anyway), align, offsetX, offsetY, showValue to append the branch's aggregate, a formatter, and a style block.

padding

treemap.levels.padding

Per-depth override of parents.padding.

fillOpacity

treemap.levels.fillOpacity

Per-depth override of parents.fillOpacity.

borderColor

treemap.levels.borderColor

Per-depth override of parents.borderColor.

borderWidth

treemap.levels.borderWidth

Per-depth override of parents.borderWidth.

borderRadius

treemap.levels.borderRadius

Per-depth override of parents.borderRadius.

hover

treemap.levels.hover

Per-depth override of parents.hover.

header

treemap.levels.header

Per-depth override of parents.header. Indexed from the outermost group actually drawn, so levels[0] is the series, or the first authored level when a single series is unwrapped.

enabled

treemap.colorScale.gradient.enabled

Force the gradient on or off. It is already active whenever a datum carries a colour metric, so this is only needed to opt out.

min

treemap.colorScale.gradient.min

Domain low. Defaults to the extent of the colour metric.

max

treemap.colorScale.gradient.max

Domain high. Defaults to the extent of the colour metric.

midpoint

treemap.colorScale.gradient.midpoint

The value the middle colour is pinned to. Defaults to 0 when the domain straddles zero, which is the diverging case. Pass null to force a plain sequential ramp.

symmetric

treemap.colorScale.gradient.symmetric

With a midpoint, balance the domain around it so equal moves in either direction read as equally saturated. Defaults to true.

stops

treemap.colorScale.gradient.stops

Explicit stops as { value, color }. Overrides colors and midpoint.

enabled

treemap.colorScale.gradientLegend.enabled

Show the gradient strip instead of the categorical legend.

width

treemap.colorScale.gradientLegend.width

Strip length for horizontal placements (top and bottom). A number is pixels, a percentage string resolves against the chart's SVG width. Defaults to '70%'.

height

treemap.colorScale.gradientLegend.height

Strip length for vertical placements (left and right), resolved against the SVG height. Defaults to '70%'.

thickness

treemap.colorScale.gradientLegend.thickness

Strip thickness on its short axis, in pixels. Defaults to 12.

align

treemap.colorScale.gradientLegend.align

Strip alignment within the legend area. Defaults to 'center'.

Available Options:

  • start: left for top/bottom placements, top for left/right
  • center (default)
  • end: right for top/bottom placements, bottom for left/right

stops

treemap.colorScale.gradientLegend.stops

Number of colour stops sampled from the shade function when no explicit ranges or continuous scale supply their own. Defaults to 16.

showLabels

treemap.colorScale.gradientLegend.showLabels

Show min and max labels at the ends of the strip. Defaults to true.

showHoverValue

treemap.colorScale.gradientLegend.showHoverValue

Show a value tooltip next to the arrow when a mark is hovered. Defaults to true.

labelStyle

treemap.colorScale.gradientLegend.labelStyle

Styling for the end labels: { fontSize, fontFamily, colors }.

arrow

treemap.colorScale.gradientLegend.arrow

The hover indicator that tracks along the strip: { size, color }.

formatter

treemap.colorScale.gradientLegend.formatter

Formats the min and max labels and the hover value tooltip. Receives the value and returns the string to show.

enabled

treemap.zoom.enabled

Enable click-to-zoom into a group.

breadcrumb

treemap.zoom.breadcrumb

Overrides drilldown.breadcrumb for this chart only, so a zoomed treemap and a drilled-in chart present the same affordance without importing the drilldown feature.

show

treemap.parents.hover.show

Outline the container on hover. Defaults to true.

color

treemap.parents.hover.color

Colour of the hover outline.

width

treemap.parents.hover.width

Width of the hover outline.

show

treemap.parents.header.show

Draw the header strip on the container.

height

treemap.parents.header.height

Height of the strip reserved at the top of the container. Defaults to 22.

minWidth

treemap.parents.header.minWidth

Skip the strip on tiles narrower than this, where no name could be read anyway. Defaults to 40.

align

treemap.parents.header.align

Horizontal alignment of the header text: 'left', 'center' or 'right'.

offsetX

treemap.parents.header.offsetX

Sets the left offset of the header text.

offsetY

treemap.parents.header.offsetY

Sets the top offset of the header text.

showValue

treemap.parents.header.showValue

Append the branch's aggregate to its name. Defaults to false.

formatter

treemap.parents.header.formatter

Formats the header text. Receives the branch name and { value, depth, seriesIndex, node, w }.

formatter: function(name, { value, depth }) { return depth === 0 ? name.toUpperCase() : name }

style

treemap.parents.header.style

Header text styling: { fontSize, fontFamily, fontWeight, color, background, cssClass }.

show

treemap.levels.hover.show

Per-depth override of parents.hover.show.

color

treemap.levels.hover.color

Per-depth override of parents.hover.color.

width

treemap.levels.hover.width

Per-depth override of parents.hover.width.

show

treemap.levels.header.show

Per-depth override of parents.header.show.

height

treemap.levels.header.height

Per-depth override of parents.header.height.

minWidth

treemap.levels.header.minWidth

Per-depth override of parents.header.minWidth.

align

treemap.levels.header.align

Per-depth override of parents.header.align.

offsetX

treemap.levels.header.offsetX

Per-depth override of parents.header.offsetX.

offsetY

treemap.levels.header.offsetY

Per-depth override of parents.header.offsetY.

showValue

treemap.levels.header.showValue

Per-depth override of parents.header.showValue.

formatter

treemap.levels.header.formatter

Per-depth override of parents.header.formatter.

style

treemap.levels.header.style

Per-depth override of parents.header.style.

value

treemap.colorScale.gradient.stops.value

Value this stop is pinned to.

color

treemap.colorScale.gradient.stops.color

Colour at this stop.

size

treemap.colorScale.gradientLegend.arrow.size

Size of the hover indicator, in pixels.

color

treemap.colorScale.gradientLegend.arrow.color

Colour of the hover indicator.

fontSize

treemap.colorScale.gradientLegend.labelStyle.fontSize

Font size of the end labels.

fontFamily

treemap.colorScale.gradientLegend.labelStyle.fontFamily

Font family of the end labels.

fontSize

treemap.parents.header.style.fontSize

Font size of the header text.

fontFamily

treemap.parents.header.style.fontFamily

Font family of the header text.

fontWeight

treemap.parents.header.style.fontWeight

Font weight of the header text.

color

treemap.parents.header.style.color

Colour of the header text.

background

treemap.parents.header.style.background

Background colour of the header strip.

cssClass

treemap.parents.header.style.cssClass

Extra CSS class on the header text element.

fontSize

treemap.levels.header.style.fontSize

Per-depth override of parents.header.style.fontSize.

fontFamily

treemap.levels.header.style.fontFamily

Per-depth override of parents.header.style.fontFamily.

fontWeight

treemap.levels.header.style.fontWeight

Per-depth override of parents.header.style.fontWeight.

color

treemap.levels.header.style.color

Per-depth override of parents.header.style.color.

background

treemap.levels.header.style.background

Per-depth override of parents.header.style.background.

cssClass

treemap.levels.header.style.cssClass

Per-depth override of parents.header.style.cssClass.

show

treemap.zoom.breadcrumb.show

Show the breadcrumb. Same shape as drilldown.breadcrumb.show, which this overrides for the treemap only.

position

treemap.zoom.breadcrumb.position

Where to place it: 'top-left' or 'top-right'. Same shape as drilldown.breadcrumb.position, which this overrides for the treemap only.

separator

treemap.zoom.breadcrumb.separator

String drawn between crumbs. Same shape as drilldown.breadcrumb.separator, which this overrides for the treemap only.

rootLabel

treemap.zoom.breadcrumb.rootLabel

Label of the leftmost crumb, the "everything" level. Defaults to All. Same shape as drilldown.breadcrumb.rootLabel, which this overrides for the treemap only.

offsetX

treemap.zoom.breadcrumb.offsetX

Sets the left offset of the breadcrumb. Same shape as drilldown.breadcrumb.offsetX, which this overrides for the treemap only.

offsetY

treemap.zoom.breadcrumb.offsetY

Sets the top offset of the breadcrumb. Same shape as drilldown.breadcrumb.offsetY, which this overrides for the treemap only.

formatter

treemap.zoom.breadcrumb.formatter

Formats one crumb. Receives the label and { index, depth, data }. Same shape as drilldown.breadcrumb.formatter, which this overrides for the treemap only.