ngx-charts
Search…
Heat Map Chart

Heat Map

Inputs

Property
Type
Default Value
Description
view
number[]
the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size
results
object[]
the chart data
scheme
object
the color scheme of the chart
animations
boolean
true
enable animations
legend
boolean
false
show or hide the legend
legendTitle
string
'Legend'
the legend title
xAxis
boolean
false
show or hide the x axis
yAxis
boolean
false
show or hide the y axis
showXAxisLabel
boolean
false
show or hide the x axis label
showYAxisLabel
boolean
false
show or hide the y axis label
xAxisLabel
string
the x axis label text
yAxisLabel
string
the y axis label text
xAxisTickFormatting
function
the x axis tick formatting
yAxisTickFormatting
function
the y axis tick formatting
xAxisTicks
any[]
predefined list of x axis tick values
yAxisTicks
any[]
predefined list of y axis tick values
gradient
boolean
false
fill elements with a gradient instead of a solid color
innerPadding
number or number[]
8
the inner padding in px
tooltipDisabled
boolean
false
show or hide the tooltip
tooltipText
function
(see source)
the HTML text to display in the tooltip
tooltipTemplate
TemplateRef
a custom ng-template to be displayed inside the tooltip

Outputs

Property
Description
select
click event

Data Format

The data format is multi series:
1
[
2
{
3
"name": "Germany",
4
"series": [
5
{
6
"name": "2010",
7
"value": 7300000
8
},
9
{
10
"name": "2011",
11
"value": 8940000
12
}
13
]
14
},
15
16
{
17
"name": "USA",
18
"series": [
19
{
20
"name": "2010",
21
"value": 7870000
22
},
23
{
24
"name": "2011",
25
"value": 8270000
26
}
27
]
28
}
29
]
Copied!
Last modified 3yr ago