new HeatmapChart(props)
EXTENDS
- Chart
PARAMETERS
Name Type Description props
Object
PROPERTIES
Name Type Description el
HTMLElement
The target element to create chart.
data
Object
Data for making Heatmap Chart.
PROPERTIES
Name Type Description categories
Object
PROPERTIES
Name Type Description x
Array.<string>
X Categories.
y
Array.<string>
Y Categories.
series
Array.<Array.<>>
Series data.
options
[ Object ]
Options for making Heatmap Chart.
PROPERTIES
Name Type Description chart
[ Object ]
PROPERTIES
Name Type Description 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
Name Type Description selectable
boolean = false
Whether to make selectable series or not.
shift
boolean = false
Whether to use shift when addData or not.
dataLabels
[ Object ]
Set the visibility, location, and formatting of dataLabel. For specific information, refer to the DataLabels guide on github.
xAxis
[ Object ]
PROPERTIES
Name Type Description title
[ stringObject ]
Axis title.
rotateLabel
boolean = true
Whether to allow axis label rotation.
date
[ booleanObject ]
Whether the x axis label is of date type. Format option used for date type. Whether the x axis label is of date type. If use date type, format option used for date type.
tick
[ Object ]
Option to adjust tick interval.
label
[ Object ]
Option to adjust label interval.
scale
[ Object ]
Option to adjust axis minimum, maximum, step size.
width
[ number ]
Width of xAxis.
height
[ number ]
Height of xAxis.
yAxis
[ ObjectArray.<Object> ]
If this option is an array type, use the secondary y axis.
PROPERTIES
Name Type Description title
[ stringObject ]
Axis title.
date
[ booleanObject ]
Whether the y axis label is of date type. Format option used for date type. Whether the y axis label is of date type. If use date type, format option used for date type.
tick
[ Object ]
Option to adjust tick interval.
label
[ Object ]
Option to adjust label interval.
scale
[ Object ]
Option to adjust axis minimum, maximum, step size.
width
[ number ]
Width of yAxis.
height
[ number ]
Height of yAxis.
plot
[ Object ]
PROPERTIES
Name Type Description width
[ number ]
Width of plot.
height
[ number ]
Height of plot.
visible
[ boolean ]
Whether to show plot line.
legend
[ Object ]
PROPERTIES
Name Type Description align
[ string ]
Legend align. 'top', 'bottom', 'right', 'left' is available.
visible
[ boolean ]
Whether to show legend.
width
[ number ]
Width of legend.
exportMenu
[ Object ]
PROPERTIES
Name Type Description visible
[ boolean ]
Whether to show export menu.
filename
[ string ]
File name applied when downloading.
tooltip
[ Object ]
PROPERTIES
Name Type Description 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
Name Type Description 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
Name Type Description noData
[ Object ]
No Data Layer Text.
theme
[ Object ]
Chart theme options. For specific information, refer to the Heatmap Chart guide on github.
PROPERTIES
Name Type Description chart
[ Object ]
Chart font theme.
noData
[ Object ]
No Data Layer Text theme.
series
[ Object ]
Series theme.
title
[ Object ]
Title theme.
xAxis
[ Object ]
X Axis theme.
yAxis
[ Object ]
Y Axis theme.
legend
[ Object ]
Legend theme.
tooltip
[ Object ]
Tooltip theme.
plot
[ Object ]
Plot theme.
exportMenu
[ Object ]
ExportMenu theme.
Instance Methods
addData(data, category)
Add data.
PARAMETERS
Name Type Description data
Array
Array of data to be added.
category
string
Category to be added.
EXAMPLES
chart.addData([10, 20], '6');
addSeries(data, dataInfo)
Add series.
PARAMETERS
Name Type Description data
Object
Data to be added.
PROPERTIES
Name Type Description name
string
Series name.
data
Array.<number>
Array of data to be added.
dataInfo
Object
Category information of the series.
PROPERTIES
Name Type Description category
Object
Y category.
EXAMPLES
chart.addSeries({ name: 'newSeries', data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110], });
hideSeriesDataLabel()
Hide series data label.
EXAMPLES
chart.hideSeriesDataLabel();
hideTooltip()
Hide tooltip.
EXAMPLES
chart.hideTooltip();
setData(data)
Convert the chart data to new data.
PARAMETERS
Name Type Description data
Object
Data to be set.
PROPERTIES
Name Type Description series
Array.<Array.<>>
Series data.
EXAMPLES
chart.setData({ categories: { x: ['1', '2', '3' ], y: ['A', 'B'], }, series: [ [1, 2, 3], [4, 5, 6], ] });
setOptions(options)
Convert the chart options to new options.
PARAMETERS
Name Type Description options
Object
Chart options
EXAMPLES
chart.setOptions({ chart: { width: 500, height: 'auto', title: 'Energy Usage', }, xAxis: { title: 'Month', }, yAxis: { title: 'Energy (kWh)', }, series: { selectable: true, }, tooltip: { formatter: (value) => `${value}kWh`, }, });
showSeriesDataLabel()
Show series data label.
EXAMPLES
chart.showSeriesDataLabel();
showTooltip(seriesInfo)
Show tooltip.
PARAMETERS
Name Type Description seriesInfo
Object
Information of the series for the tooltip to be displayed.
PROPERTIES
Name Type Description seriesIndex
number
Index of series.
index
number
Index of data within series.
EXAMPLES
chart.showTooltip({index: 1, seriesIndex: 2});
updateOptions(options)
Update chart options.
PARAMETERS
Name Type Description options
Object
Chart options
EXAMPLES
chart.updateOptions({ chart: { height: 'auto', title: 'Energy Usage', }, tooltip: { formatter: (value) => `${value}kWh`, }, });