Chart Component

The React Chart component enables developers to visualize data through a wide range of interactive and customizable chart types. It supports real-time updates, responsive layouts, and efficient rendering of large datasets for modern web applications.

Usage

To import and use the Chart component in your application, use the following code snippet:

Demos

Explore the demos of the React Chart component. Refer to this page.

Props

The following table outlines the props for the Chart component:

NameTypeDefaultDescription
accessibility
ChartAccessibilityProps
{ ariaLabel: '', focusable: true, role: '', tabIndex: 0 }

Provides accessibility options for chart container element.

background
string
''

Sets the background color of the chart. Accepts valid CSS color strings in hex or RGBA formats.

backgroundImage
string
''

Sets the background image of the chart. Accepts a URL or local image path.

border
ChartBorderProps
{ color: '', width: 1, dashArray: '' }

Customizes the chart border using color, width, and dashArray properties.

enableSideBySidePlacement
boolean
true

Controls whether columns for different series appear side by side in a column chart.

focusOutline
FocusOutlineProps
{ width: 1.5, color: null, offset: 0 }

Specifies the visual outline style applied when the chart container receives focus.

height
string
null

Sets the height of the chart. Accepts values in pixels (e.g., '100px') or percentages (e.g., '100%'). If set to '100%', the chart occupies the full height of its parent container.

id
string
''

Unique identifier for the chart element.

margin
ChartMarginProps
{ top: 10, right: 10, bottom: 10, left: 10 }

Customizes the margins around the chart. Defines the space between the chart's outer edge and its chart area.

noDataTemplate
string | Function
null

Specifies a template to display when the chart has no data. This template is rendered when all series data sources are empty. It supports both HTML string content and React functional templates.

palettes
string[]
[ ]

Defines a set of colors used for rendering chart series. Each color in the array is applied sequentially to the series.

pointRender
(args: PointRenderProps) => string
null

Specifies a callback function to customize the color of individual points in the series.

theme
Theme
'Material'

Applies a visual theme to the chart. Available options:

  • Material: Applies the Material light theme.
  • MaterialDark: Applies the Material dark theme.
  • Tailwind: Applies the Tailwind theme.
  • TailwindDark: Applies the Tailwind dark theme.
  • Bootstrap: Applies the Bootstrap theme.
  • BootstrapDark: Applies the Bootstrap dark theme.
transposed
boolean
false

If set to true, the chart is rendered in a transposed layout, swapping the X and Y axes.

width
string
null

Sets the width of the chart. Accepts values in pixels (e.g., '100px') or percentages (e.g., '100%'). If set to '100%', the chart occupies the full width of its parent container.

Events

The following table outlines the events for the Chart component:

NameTypeDescription
onAxisLabelClick
(args: AxisLabelClickEvent) => void

Triggered after an axis label is clicked. Provides details about the clicked label including its position, value, and associated axis.

onClick
(args: ChartMouseEvent) => void

Triggered when the chart is clicked. Provides information about the mouse event, including the target element and pointer coordinates.

onLegendClick
(args: LegendClickEvent) => void

Triggered after a legend item is clicked. Provides details about the clicked legend item including associated series and data points.

onMouseEnter
(args: ChartMouseEvent) => void

Triggered when the mouse enters a chart element. Provides information about the mouse event, including the target element and pointer coordinates relative to the chart.

onMouseLeave
(args: ChartMouseEvent) => void

Triggered when the mouse leaves the chart. Provides information about the mouse event, including the target element and pointer coordinates relative to the chart.

onMouseMove
(args: ChartMouseEvent) => void

Triggered when the mouse moves over the chart. Provides information about the mouse event, including the target element and pointer coordinates relative to the chart.

onMultiLevelLabelClick
(args: MultiLevelLabelClickEvent) => void

Triggered when a multi-level label is clicked in the chart. Provides details about the clicked label, including its axis, text, level, and range.

onPointClick
(args: PointClickEvent) => void

Triggered when a data point in the chart is clicked. Provides details about the clicked point, including its position, series index, and mouse coordinates.

onResize
(args: ResizeEvent) => void

Triggered after the chart is resized. Provides details about the chart's size before and after the resize.

onZoomEnd
(args: ZoomEndEvent) => void

Triggered continuously while a zooming operation is in progress. Fires when the user finishes a zoom action, such as releasing the mouse or completing a pinch gesture. Provides details about the zoomed axis, including its name, zoom factor, zoom position, and visible range before and after the operation.

onZoomStart
(args: ZoomStartEvent) => void

Triggered after a zoom selection operation is completed. Fires during user interactions such as dragging, pinching, or mouse wheel zooming. Provides access to the axis data involved in the zoom operation.