logo

/github|v4.6.1

Class

new TreemapChart(props)

EXTENDS
  • Chart
PARAMETERS
NameTypeDescription

props

Object

PROPERTIES
NameTypeDescription

el

HTMLElement

The target element to create chart.

data

Object

Data for making Treemap Chart.

PROPERTIES
NameTypeDescription

categories

Array.<string>

Categories.

series

Array.<Object>

Series data.

PROPERTIES
NameTypeDescription

label

string

Data name.

data

[ number ]

data value.

colorValue

[ number ]

color value. If you use the useColorValue option, the color is painted based on this value.

children

[ Array ]

Child element value.

options

[ Object ]

Options for making Treemap Chart.

PROPERTIES
NameTypeDescription

chart

[ Object ]

PROPERTIES
NameTypeDescription

title

[ stringObject ]

Chart title text or options.

animation

[ booleanObject ]

Whether to use animation and duration when rendering the initial chart.

width

[ numberstring ]

Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.

height

[ numberstring ]

Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.

series

[ Object ]

PROPERTIES
NameTypeDescription

selectable

boolean = false

Whether to make selectable series or not.

useColorValue

[ boolean ]

Whether to use color value or not.

zoomable

[ boolean ]

Whether to use zoom feature or not.

dataLabels

[ Object ]

Set the visibility, location, and formatting of dataLabel. For specific information, refer to the DataLabels guide on github.

legend

[ Object ]

PROPERTIES
NameTypeDescription

align

[ string ]

Legend align. 'top', 'bottom', 'right', 'left' is available.

visible

boolean = false

Whether to show legend.

width

[ number ]

Width of legend.

exportMenu

[ Object ]

PROPERTIES
NameTypeDescription

visible

[ boolean ]

Whether to show export menu.

filename

[ string ]

File name applied when downloading.

tooltip

[ Object ]

PROPERTIES
NameTypeDescription

offsetX

[ number ]

Offset value to move title horizontally.

offsetY

[ number ]

Offset value to move title vertically.

formatter

[ Function ]

Function to format data value.

template

[ Function ]

Function to create custom template. For specific information, refer to the Tooltip guide on github.

responsive

[ Object ]

Rules for changing chart options. For specific information, refer to the Responsive guide on github.

PROPERTIES
NameTypeDescription

animation

[ booleanObject ]

Animation duration when the chart is modified.

rules

[ Array ]

Rules for the Chart to Respond.

lang

[ Object ]

Options for changing the text displayed on the chart or i18n languages.

PROPERTIES
NameTypeDescription

noData

[ Object ]

No Data Layer Text.

theme

[ Object ]

Chart theme options. For specific information, refer to the Treemap Chart guide on github.

PROPERTIES
NameTypeDescription

chart

[ Object ]

Chart font theme.

noData

[ Object ]

No Data Layer Text theme.

series

[ Object ]

Series theme.

title

[ Object ]

Title theme.

legend

[ Object ]

Legend theme.

tooltip

[ Object ]

Tooltip theme.

plot

[ Object ]

Plot theme.

exportMenu

[ Object ]

ExportMenu theme.

Instance Methods

addSeries(data, dataInfo)

Add series.

PARAMETERS
NameTypeDescription

data

Object

Data to be added.

PROPERTIES
NameTypeDescription

name

string

Series name.

data

Array.<Object>

Array of data to be added.

dataInfo

EXAMPLES
chart.addSeries({
  label: 'Documents',
  children: [
    {label: 'A', data: 20},
    {label: 'B', data: 40},
  ],
});

hideSeriesDataLabel()

Hide series data label.

EXAMPLES
chart.hideSeriesDataLabel();

hideTooltip()

Hide tooltip.

EXAMPLES
chart.hideTooltip();

setData(data)

Convert the chart data to new data.

PARAMETERS
NameTypeDescription

data

Object

Data to be set.

EXAMPLES
chart.setData(
  series: [
    {
      label: 'Documents',
      children: [
        {label: 'A', data: 20},
        {label: 'B', data: 40},
      ],
    },
    {
      label: 'Documents',
      data: 30,
    }
  ]
);

setOptions(options)

Convert the chart options to new options.

PARAMETERS
NameTypeDescription

options

Object

Chart options

EXAMPLES
chart.setOptions({
  chart: {
    width: 500,
    height: 'auto',
    title: 'Energy Usage',
  },
  series: {
    selectable: true,
  },
  tooltip: {
    formatter: (value) => `${value}kWh`,
  },
});

showSeriesDataLabel()

Show series data label.

EXAMPLES
chart.showSeriesDataLabel();

showTooltip(seriesInfo)

Show tooltip.

PARAMETERS
NameTypeDescription

seriesInfo

Object

Information of the series for the tooltip to be displayed.

PROPERTIES
NameTypeDescription

seriesIndex

number

Index of series.

EXAMPLES
chart.showTooltip({seriesIndex: 1});

updateOptions(options)

Update chart options.

PARAMETERS
NameTypeDescription

options

Object

Chart options

EXAMPLES
chart.updateOptions({
  chart: {
    height: 'auto',
    title: 'Energy Usage',
  },
  tooltip: {
    formatter: (value) => `${value}kWh`,
  },
});
Resizable