Chart

import { Chart } from '@enmovil/ui-design-system';

A chart whose colours come from the design system. Pass a chart type and chart options; it also handles the height, custom series colours, a loading skeleton and an empty state.

Properties

Property	Type	Required	Default	Allowed values	Description
type	string	No	—	'line', 'spline', 'area', 'areaspline', 'column', 'bar', 'pie', 'scatter'	Shorthand for options.chart.type.
options	Options	No	—	—	Highcharts options, deep-merged LAST — so anything set here wins over every default this component applies, chart.styledMode and palette included. That is deliberate: consumers get the full Highcharts surface. The cost is that styledMode: false or a palette block silently opts a chart out of design system theming, because both stop the token layer in Chart.scss from reaching the SVG.
height	string | number	No	400	—	Wrapper height; Highcharts sizes itself to its container. Accepts a percentage or any CSS length. Default 400.
colors	string[]	No	—	—	Series colours for this chart only, from index 0 up. Written as inline --highcharts-color-N, which outranks the token defaults in Chart.scss on the same element. Only the first ten apply: the vendor stylesheet defines .highcharts-color-0 through -9 and nothing beyond, so an eleventh entry has no rule to land in. Prefer a token (var(--enmv-color-primary)) over a literal so the chart still follows a theme switch.
loading	boolean	No	false	—	Replaces the chart with a skeleton of the same height.
empty	ReactNode	No	'No data to display.'	—	Shown instead of the chart when no series carries data. Pass null (or any falsy value) to render the empty chart — axes and all — the way Highcharts would.
className	string	No	—	—	Extra CSS class added to the chart's outer wrapper, also while it shows the loading skeleton or the empty state.

Other attributes

Chart passes 274 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

This component has no events.

Children

Chart does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Column example.

Loading playground…

Storybook

Open Chart in Storybook to try every story with the full set of controls.