Trend Chart

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { TrendChart } from '@optimus-web/core';
                                                        
                                                        <TrendChart 
                                                          id="trend-chart"
                                                          title="Trend Chart"
                                                          description="Trend Chart description"
                                                          color="positive"
                                                          minHeight={40}
                                                          minWidth={120}
                                                          animated={true}
                                                          data={data}
                                                        />

Name	Description	Type	Default
animated?	Apply animation to the chart on load	boolean	true
color	Set the sentiment of the trend	SemanticDatavizColor	-
data	The dataset rendered by the chart	TrendChartData[]	-
description?	Chart description, used for aria label, does not render in the UI	string	undefined
empty?	Sets empty state of chart with default message or you can define custom message	boolean \| { message: ReactNode }	undefined
error?	Sets empty state of chart with default message or you can define custom message	boolean \| { message: ReactNode }	undefined
id?	Set an unique id for the chart	string	undefined
labelFormatter?	Callback for formatting the label inside the tooltip	LabelFormatter	undefined
loading?	Show skeleton loader	boolean	undefined
minHeight?	Applies min-height to the chart container	number	40
minWidth?	Applies min-width to the chart container	number	120
title?	Chart title, used for aria label, does not render in the UI	string	undefined
valueFormatter?	Callback for formatting the value inside the tooltip	ValueFormatter	undefined

Resources

Example

API