Charts

Charts creates interactive financial charts.

Data view example

A line chart with data view toggle

Line Chart

A line chart is a type of chart that displays information as a series of data points connected by straight line segments

Area Chart

An area chart is basically a colored area between the line connecting all data points and the time scale.

Bar Chart

A bar chart shows price movements in the form of bars.

Candlestick Chart

A candlestick chart shows price movements in the form of candlesticks. On the candlestick chart, open & close values form a solid body of a candle while wicks show high & low values for a candlestick's time intervas

APIs

ThemedChart.Props

AttributeDescriptionTypeAccepted valuesDefault
serieschart dataThemedChartData--
themeui themeUIThemes-false
showLegendsshow lagendboolean-false
showTimeshow timeboolean-false
showSecondsshow secondsboolean-false
timeFormatterformat timeTimeFormatterFn--
tickFormatterformat tickTickMarkFormatter--

ThemedChartData

type ThemedChartData = {
  data: ThemedChartItem[]
  type: 'line' | 'area' | 'bar' | 'candle'
  side?: 'left' | 'right'
  showTitle?: boolean
  visible?: boolean
  color: string
  priceLineVisible?: boolean
  lastValueVisible?: boolean
  priceFormatter?: ThemedChartPriceFormatter
}

UIThemes

type UIThemes = {
  type: string
  font: UIThemesFont
  palette: UIThemesPalette
  breakpoints: UIThemesBreakpoints
  expressiveness: UIThemesExpressiveness
}