ngx-charts
docs-test
docs-test
  • Introduction
  • Motivation
  • Features
  • Installing
  • Custom Charts
  • Examples
    • Bar Charts
      • Vertical Bar Chart
      • Horizontal Bar Chart
      • Grouped Vertical Bar Chart
      • Grouped Horizontal Bar Chart
      • Stacked Vertical Bar Chart
      • Stacked Horizontal Bar Chart
      • Normalized Vertical Bar Chart
      • Normalized Horizontal Bar Chart
    • Pie Charts
      • Pie Chart
      • Advanced Pie Chart
      • Pie Grid Chart
    • Line/Area Charts
      • Line Chart
      • Area Chart
      • Stacked Area Chart
      • Normalized Area Chart
    • Polar/radar Chart
    • Heat Map Chart
    • Tree Map Chart
    • Number Card Chart
    • Gauge Chart
    • Linear Gauge Chart
    • DAG Chart
  • Contributing
    • Building
    • Troubleshooting
    • Guidelines
    • Community
    • Credits
  • Changelog
  • License
Powered by GitBook
On this page
  • Heat Map
  • Inputs
  • Outputs
  • Data Format
  1. Examples

Heat Map Chart

PreviousPolar/radar ChartNextTree Map Chart

Last updated 6 years ago

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:

[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000
      },
      {
        "name": "2011",
        "value": 8270000
      }
    ]
  }
]