v14.0.8


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

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



Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024