treemap


plotOptions: {
    treemap: {
        enableShades: true,
        shadeIntensity: 0.5,
        reverseNegativeShade: true,
        distributed: false,
        useFillColorAsStroke: false,
        dataLabels: {
           format:  "scale"
        },
        colorScale: {
          ranges: [{
              from: 0,
              to: 0,
              color: undefined,
              foreColor: undefined,
              name: undefined,
          }],
          inverse: false,
          min: undefined,
          max: undefined
        },        
    }
}

plotOptions

treemap

enableShades: Boolean

Enable different shades of color depending on the value

shadeIntensity: Number

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

reverseNegativeShade: Boolean

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: Boolean

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: Boolean

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

dataLabels

format: String

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: Number

ranges: Array

from: Number

Value indicating range’s upper limit

to: Number

Value indicating range’s lower limit

color: String

Background color to fill the range with.

foreColor: String

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

inverse: Boolean

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

min: Number

Specify the lower range for treemap color calculation.

max: Number

Specify the higher range for treemap color calculation.

Why Choose ApexCharts

treemap

Stay Updated