Line Chart

A line chart is a graphical representation of an asset's historical price action that connects a series of data points with a continuous line. This is the most basic type of chart used in finance and typically only depicts a security's closing prices over time. So here the line chart is developed with react-vis.

Live Editor

Usage

import { LineChart } from "@k2/rv-viz";

2 . Add data or URL to LineChart component.

<LineChart data={LineChartData} />

// or

<LineChart url="server/api/data" />

Examples

LineChart With Multiple styles: Demo

import { LineChart } from "@k2/rv-viz";

const data = [

{

name: "value 1",

strokeWidth: 3,

curve: "curveMonotoneX",

color: "#e5be20",

data: [

{ x: 1593003889612, y: 0 },

{ x: 1593003829612, y: 5 },

{ x: 1593003769612, y: 10 },

{ x: 1593003709612, y: 20 },

{ x: 1593003649612, y: 3 },

{ x: 1593003589612, y: 18 },

{ x: 1593003529612, y: 11 },

],

},

{

name: "value 2",

strokeWidth: 3,

curve: "curveMonotoneX",

strokeDasharray: "15 4",

color: "#688bbf",

data: [

{ x: 1593003889612, y: 7 },

{ x: 1593003829612, y: 3 },

{ x: 1593003769612, y: 1 },

{ x: 1593003709612, y: 2 },

{ x: 1593003649612, y: 9 },

{ x: 1593003589612, y: 11 },

{ x: 1593003529612, y: 7 },

],

},

];

function RenderChart() {

return <LineChart data={data} />;

}

LineChart With Spline: Demo

import { LineChart } from "@k2/rv-viz";

const data = [

{

name: "value 1",

color: "#e5be20",

strokeWidth: 3,

curve: "curveMonotoneX",

data: [

{ x: 1593003889612, y: 15 },

{ x: 1593003829612, y: 22 },

{ x: 1593003769612, y: 5 },

{ x: 1593003709612, y: 12 },

{ x: 1593003649612, y: 10 },

{ x: 1593003589612, y: 0 },

{ x: 1593003529612, y: 12 },

],

},

{

name: "value 2",

color: "#688bbf",

strokeWidth: 3,

curve: "curveMonotoneX",

data: [

{ x: 1593003889612, y: 14 },

{ x: 1593003829612, y: 12 },

{ x: 1593003769612, y: 20 },

{ x: 1593003709612, y: 13 },

{ x: 1593003649612, y: 12 },

{ x: 1593003589612, y: 13 },

{ x: 1593003529612, y: 0 },

],

},

];

function RenderChart() {

return <LineChart data={data} />;

}

LineChart With Pointed Arc: Demo

import { LineChart } from "@k2/rv-viz";

const data = [

{

name: "Apps Open",

color: "#6ab04c"

data: [

{ x: 1593003889612, y: 7},

{ x: 1593003829612, y: 3},

{ x: 1593003769612, y: 1},

{ x: 1593003709612, y: 2},

{ x: 1593003649612, y: 9},

{ x: 1593003589612, y: 11},

{ x: 1593003529612, y: 7},

],

},

];

function RenderChart() {

return <LineChart data={data} />;

}

Click here for more variations of line chart.

Props

Note: External props are mostly derived from react-vis & K2. All external props are linked. You can click highlighted props to get more details from official sites.

Property	Type	Required	Default value	Description
data	LineChartData[]	Yes	None	Data for the LineChart.
xyPlot	XYPlotProps	no	None	Inherited from "react-vis"
xAxis	boolean | XAxisProps	no	true	Enable or customize XAxis. Inherited from "react-vis".
yAxis	boolean | YAxisProps	no	true	Enable or customize YAxis. Inherited from "react-vis".
verticalGridLines	boolean | VerticalGridLinesProps	no	false	Enable or customize VerticalGridLines. Inherited from "react-vis".
horizontalGridLines	boolean | HorizontalGridLinesProps	no	false	Enable or customize HorizontalGridLines. Inherited from "react-vis".
colors	"light" | "dark" | GradientColor	no	"light"	Colors of visual in different theme modes
title	string | JSX.Element	no	None	Title of the chart.
animate	boolean	no	true	Enable the animation.
legends	boolean | LegendsProps	no	true	Enable or customize the legends.
crosshair	boolean | CrosshairProps	no	true	Enable or customize the crosshair.
onClick	(params: { data: LineChartData }) => void	no	None	Callback for LineChart click.
style	CSSProperties	no	None	Styles applied to the root element of chart.
className	string	no	None	Class applied to the root element of chart.
classes	Classes API	no	None	Classes API of chart.

LineChart is wrapped with fetchData HoC, to perform data handling tasks, which adds support for some additional props.

Custom Types

LineChartData

Property	Type	Required	Default value	Description
name	string	Yes	None	Name of the series.
size	string | number	no	5	The size of each of the marks.
data	Array<{ x: string | number | date, y: string | number | date }>	Yes	None	Array of data for the series.
color	string | number	no	None	Color for line series.
opacity	number	no	1	Opacity of the line chart from 0 (transparent) to 1 (opaque).

LineChartData extends LineSeries and LineMarkSeries from react-vis

CrosshairProps

Property	Type	Required	Default value	Description
xFormatter	(value: number) => string;	no	None	Formatter for thhe xValue of crosshair.
yFormatter	(value: number) => string;	no	None	Formatter for thhe xValue of crosshair.
component	(props: ComponentProps) => JSX.Element;	no	None	Custom Component for crosshair.
style	CSSProperties	no	None	Styles applied to the root element of crosshair.
className	string	no	None	Class applied to the root element of crosshair.
classes	Crosshair Classes API	no	None	Classes Api of crosshair.

CrosshairProps extends crosshair from react-vis

ComponentProps

Property	Type	Required	Default value	Description
data	LineChartData[]	Yes	None	Data for the LineChart.
pointData	Array<{x: number, y: number}>	Yes	None	Active x and y points of crosshair position.
activeSeriesData	[key: string]: boolean;	Yes	None	State of active series in legends.

Crosshair Classes

Classes API enables customization and styling of Crosshair elements through their classes.

ClassName	Type	Default value	Description
root	string	None	Applied to root element of crosshair.
xValue	string	None	Applied to xValue of crosshair.
yValue	string	None	Applied to yValue of crosshair.
seriesLabel	string	None	Applied to seriesLabe of crosshair.

Classes

Classes API enables customization and styling of chart elements through their classes.

ClassName	Type	Default value	Description
root	string	None	Applied to root element of chart.
header	string	None	Applied to header of chart.
title	string	None	Applied to title of chart.
legends	string	None	Applied to legends of chart.
chart	string	None	Applied to svg component of chart.
lineSeries	string	None	Applied to lineSeries of chart.
lineMarkSeries	string	None	Applied to lineMarkSeries of chart.
xAxis	string	None	Applied to xAxis of chart.
yAxis	string	None	Applied to yAxis of chart.
xyPlot	string	None	Applied to xyPlot of chart.
crosshair	string	None	Applied to the crosshair of the chart.

Please see Class Specificity for correctly defining it.