Line Chart

A line chart is a type of data visualization that displays information through a series of data points called "markers" connected by straight line segments. These charts are particularly useful for showing trends and patterns over a continuous interval or time span.

Usage

Basic chart

Just pass in the data and the labels, the ticks are automatically generated using a nice number algorithm.

With header

You can pass in a header to the chart to display title and extra actions. We also support Chart.SelectAction as one of the header actions.

Chart title is here

6M



With axis config

You can pass in a custom axis config to the chart to display the axis labels and ticks.

Empty state

If data is empty, the chart will display an empty state. You need to pass in the empty text or the chart will not display the empty state.

Custom colors

You can use the styleConfig prop to customize the colors of the chart. The list of available colors are listed in our Visualisation Colors Guideline.

Props

Chart.Line

	Prop	Required	Default	Type
	data	required		Series<number[]>[]
	emptyText			string
	headerConfig			HeaderConfig
	style			ViewStyle
	styleConfig			StyleConfig
	testID			string
	xAxisConfig			XAxisConfig
	yAxisConfig			YAxisConfig

Chart.SelectAction

	Prop	Required	Default	Type
	onConfirm	required		(value: V) => void
	value	required		V
	bottomSheetConfig		{}	{ variant?: "fixed" | "floating"; header?: string | ReactElement<any, string | JSXElementConstructor<any>>; }
	disabled		false	boolean
	onDismiss			() => void
	options		[]	OptionType<V>[]
	style			StyleProp<ViewStyle>
	supportedOrientations		['portrait']	("portrait" | "landscape")[]
	testID			string