Skip to main content

Top-level Chart Component

Overview​

The whole @elastic/charts library starts with the Chart component.

Props​

size​

Sets the size of the chart.

Examples:

  • 200 - Sets width and height to 200px
  • '90%' - Sets width and height to 90% of parent
  • ['100%', 200] - Sets width to 100% of parent and height to 200px
  • { width: '100%', height: 200 } - Sets width to 100% of parent and height to 200px

id​

  • Type: id?: string
  • Default: a random UUID via uuid

A unique id to indetify the chart. Used to renerate individual chart state.

title​

  • Type: title?: string

Top-level title of the chart.

description​

  • Type: description?: string

Top-level description of the chart.

children​

  • Type: children?: ReactNode

The children specs defining the chart.

In @elastic/charts we configure the chart using a react component api, we call these configuration components specs. Theses specs are applied as children of the Chart element.

While technically children are optional, passing no children will simply return an empty chart.

className​

  • Type: className?: string

Adds className to .echChartContent element for custom styling.

warning

Careful adding too many styles, as this can lead to unexpected apperance and behaviour of the chart.

renderer​

  • Type: renderer?: 'svg' | 'canvas'
  • Default: 'canvas'

This sets the renderer type of the chart.

info

Currently this option not configurable per chart as there is not a parrallel renderer for all charts.