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

Links

Open in playground Open in Storybook View source

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>
  );
};

tsx

API Reference

LineChart


  LineChartProps
  & Except<CartesianBaseProps, 'axis' | 'axisFiltered' | 'onBrushChange'>

index

Description
Set the properties associated with the Index Axis.
Type
```
LineChartIndex
```
Value

{ dataKey: string } & Partial<AxisProps>

series

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>

data?

Description
Set the data structure that will be used to render the chart.
Type
```
Array<Record<string, any>>
```
Default
```
[]
```

hideMissingDataConnection?

Description
Prevent showing a connecting line between points when data is missing.
Type
```
boolean
```
Default
```
false
```

hidePadding?

Description
Remove the padding from the chart container.
Type
```
boolean
```
Default
```
false
```

layout?

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'
```

overlay?

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>

preventTooltipDisplay?

Description
Prevent from displaying the tooltip on the chart when `true`.
Type
```
boolean
```
Default
```
false
```

renderAs?

Description
Set the type of render function used to draw any chart line.
Type
```
enum
```
Default
```
'curves'
```
Value
```
'lines' | 'curves' | 'steps'
```

showAverage?

Description
Display an average line and label when true.
Type
```
boolean
```
Default
```
false
```

showMarker?

Description
Show a marker for every single data point.
Type
```
boolean
```
Default
```
false
```

showMarkerLabel?

Description
Show a label and a marker for up to 12 data point on each series of lines.
Type
```
boolean
```
Default
```
false
```

showTrendline?

Description
Display a trend line for every single line when `true`.
Type
```
boolean
```
Default
```
false
```

theme?

Description
Set the theme of the chart.
Type
```
ThemeVariants
```
Default
```
'light'
```
Value
```
'light' | 'dark'
```

tooltipExtraContent?

Description
Set extra custom content to be displayed below the default information.
Type
```
ReactNode
```