Line Chart

A Line Chart in REAVIZ depicts data using points connected by lines, emphasizing trends and changes over a continuous set of values, typically along an x-axis and a y-axis. Line charts are effective for visualizing data trends over time or continuous data points.

Types supported by reaviz:

Where to use:

Show Trends Over Time: Ideal for visualizing how data changes over a period.
Identify Patterns: Useful for identifying patterns or trends in data sets.
Compare Multiple Data Sets: Great for comparing multiple sets of data.
Track Changes: Effective for tracking changes in data points.

Quick Start

To create a line chart, use import the LineChart and give it data. The chart will automatically configure itself with the default options exposed via props.

import { LineChart } from 'reaviz';


export default function App() {
  return (
    <LineChart
      height={300}
      width={300}
      data={[
        { key: new Date('11/29/2019'), data: 13 },
        { key: new Date('11/30/2019'), data: 23 },
        { key: new Date('12/1/2019'), data: 7 },
      ]}
    />
  );
}

import { LineChart } from 'reaviz';

export default function App() {
  return (
    <LineChart
      height={300}
      width={300}
      data={[
        { key: new Date('11/29/2019'), data: 13 },
        { key: new Date('11/30/2019'), data: 23 },
        { key: new Date('12/1/2019'), data: 7 },
      ]}
    />
  );
}

Examples

Single Series

Multi Series

Radial

Stacked

Stacked Normalized

API

LineChart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartDataShape[]`
`series`	The series component that renders the area/line/circles components. `ReactElement<AreaSeriesProps, FC<Partial<AreaSeriesProps>>>`	`<LineSeries />`
`yAxis`	The linear axis component for the Y Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`
`xAxis`	The linear axis component for the X Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`
`gridlines`	The chart's background gridlines component. `ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>`
`brush`	The chart's brush component. `ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>`
`zoomPan`	The chart's zoom pan component. `ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>>`
`secondaryAxis`	Any secondary axis components. Useful for multi-axis charts. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

LineSeries (opens in a new tab)

Prop	Description	Default
`id`	Id set internally by `AreaChart`. `string`
`xScale`	D3 scale for X Axis. Set internally by `AreaChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `AreaChart`. `any`
`data`	Parsed data shape. Set internally by `AreaChart`. `ChartInternalDataShape[]`
`height`	Height of the chart. Set internally by `AreaChart`. `number`
`width`	Width of the chart. Set internally by `AreaChart`. `number`
`animated`	Whether to animate the enter/update/exit. `boolean`
`type`	Type of area chart to render. `AreaChartTypes`
`interpolation`	Interpolation type for the area/line. `InterpolationTypes`
`tooltip`	Tooltip for the chart area. `ReactElement<TooltipAreaProps, ForwardRefExoticComponent<Partial<TooltipAreaProps> & RefAttributes<any>>>`
`markLine`	Markline for the chart. `ReactElement<MarkLineProps, FC<Partial<MarkLineProps>>>`
`symbols`	Symbols used to show points. `ReactElement<PointSeriesProps, FC<Partial<PointSeriesProps>>>`
`line`	Line that is rendered. `ReactElement<LineProps, FC<Partial<LineProps>>>`	`<Line strokeWidth={3} />`
`area`	Area that is rendered. `ReactElement<AreaProps, FC<Partial<AreaProps>>>`	`null`
`colorScheme`	Color scheme for the series. `ColorSchemeType`
`isZoomed`	Whether the chart has been zoomed or not. Set internally by `AreaChart`. `boolean`
`valueMarkers`	Value markers line for the chart. `ReactElement<LinearValueMarkerProps, FC<LinearValueMarkerProps>>[]`

Linear Gauge Map