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

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

LineSeries

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