Trend Chart

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            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}
                                                        />
                                                        
                                                            

Storybook

Open example in our Storybook

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

API

This component is a wrapper over Recharts LineChart

Name

Description

Type

Default

title?

Chart title, used for aria label, does not render in the UI

string

undefined

description?

Chart description, used for aria label, does not render in the UI

 

string

undefined

animated?

Apply animation to the chart on load

boolean

true

valueFormatter?

Callback for formatting the value inside the tooltip

ValueFormatter

undefined

labelFormatter?

Callback for formatting the label inside the tooltip

LabelFormatter

undefined

minWidth?

Applies min-width to the chart container

number

120

minHeight?

Applies min-height to the chart container

number

40

data

The dataset rendered by the chart

TrendChartData[]

-

id?

Set an unique id for the chart

string

undefined

color

Set the sentiment of the trend

SemanticDatavizColor

-