data visualization
Line Chart
A line chart component uses points connected by line segments to demonstrate changes in value.
Features
- Feature rich
- Customizable
- Fully responsive
- Themes ready
Product A Product B
Anatomy
import { Card } from "@wonderflow/react-components";
import { LineChart } from "@wonderflow/charts";
import { data } from "../api/.."
const data = [
{date: '2014', value1: 81, value2: 33},
{date: '2015', value1: 121, value2: 72},
{date: '2016', value1: 183, value2: 118},
{date: '2017', value1: 211, value2: 180},
{date: '2018', value1: 244, value2: 143},
{date: '2019', value1: 203, value2: 121},
{date: '2020', value1: 240, value2: 133},
{date: '2021', value1: 103, value2: 174},
{date: '2022', value1: 301, value2: 182},
{date: '2023', value1: 298, value2: 201},
]
export default () => {
return (
<Card>
<LineChart
title='Feedback Count'
subtitle='trends from 2014 to 2023'
showMarkerLabel
data={data}
index={{
dataKey: 'date',
label: 'Year',
}}
series={{
dataKey: ['value1', 'value2'],
label: 'Feedback Count',
rename: (_, i) => i ? 'ProductB' : 'ProductA',
domain: [0, 350]
}}
showTrendline
hidePadding
/>
</Card>
);
};
API Reference
LineChart
LineChartProps
& Except<CartesianBaseProps, 'axis' | 'axisFiltered' | 'onBrushChange'>
Description
Set the properties associated with the Index Axis.
Type
LineChartIndex
Value
{ dataKey: string } & Partial<AxisProps>
Description
Set the properties associated with any Series of lines.
Type
LineChartSeries
Value
{ dataKey: string[]; style?: Array<LineStyle | undefined>; rename?: (dataKey: string, index?: number) => string; extraData?: (datum: Record<string, any>) => string; } & Partial<AxisProps>
Description
Set the data structure that will be used to render the chart.
Type
Array<Record<string, any>>
Default
[]
Description
Prevent showing a connecting line between points when data is missing.
Type
boolean
Default
false
Description
Remove the padding from the chart container.
Type
boolean
Default
false
Description
Set the layout of the chart. `Index`, `Series` and eventually `Overlay` will be automatically rearranged. Layout is Horizontal when Index is on the Bottom axis, and is Vertical when Index is on the Left one.
Type
CartesianChartLayout
Default
'horizontal'
Value
'vertical' | 'horizontal'
Description
Set the properties associated with the Overlay Axis.
Type
LineChartSeries
Value
{ dataKey: string[]; style?: Array<LineStyle | undefined>; rename?: (dataKey: string, index?: number) => string; extraData?: (datum: Record<string, any>) => string; } & Partial<AxisProps>
Description
Prevent from displaying the tooltip on the chart when `true`.
Type
boolean
Default
false
Description
Set the type of render function used to draw any chart line.
Type
enum
Default
'curves'
Value
'lines' | 'curves' | 'steps'
Description
Display an average line and label when true.
Type
boolean
Default
false
Description
Show a marker for every single data point.
Type
boolean
Default
false
Description
Show a label and a marker for up to 12 data point on each series of lines.
Type
boolean
Default
false
Description
Display a trend line for every single line when `true`.
Type
boolean
Default
false
Description
Set the theme of the chart.
Type
ThemeVariants
Default
'light'
Value
'light' | 'dark'
Description
Set extra custom content to be displayed below the default information.
Type
ReactNode