React Graphs SVG

Line Chart

Chart with a polyline and marked points

Bar Chart

Chart with vertical column bars

Stacked Bar Chart

Chart with vertical column stacks

Customized Bar Chart

Showcasing the custom styling capabilities

Sample Code for Line Chart

Shows a chart with Months on X-axis and Numbers on Y-Axis

Chart Axis data

const xaxis =  [
  { value: 1672531200000, text: 'Jan 23' }, 
  { value: 1675209600000, text: 'Feb 23' }, 
  // ...
  { value: 1701388800000, text: 'Dec 23' }];
const yaxis =  [ 10, 20, /* ...*/ 100 ]
const axis = [xaxis, yaxis];

Chart Dataset

const data = [
  [{ value: 1672531200000, text: 'Jan 23' }, 12], 
  [{ value: 1675209600000, text: 'Feb 23' }, 15], 
  // ...
  [{ value: 1701388800000, text: 'Dec 23' }, 55]];

Line Chart

import { LineChart } from 'react-graphs-svg'

const size = [200, 100];
const margins = { margin: [10, 10], startOffset: [5, 5] };
<LineChart axis={axis} size={size} data={data} margins={margins}>
</LineChart>

API reference

Data type for Axis, Dataset and Chart props

BaseChartProps

type XY<X = number, Y = X> = [x: X, y: Y];
type Data = number | { value: number; text: string; };

type BaseChartProps = {
  className?: string;
  children?: ReactNode;
  axis: XY<Data[]>;
  size: XY;
  margins: Margins;
};

Line Chart Props

type LineChartProps = BaseChartProps & {
  data:XY<Data>[]
};

Bar Chart Props

type BarChartProps = BaseChartProps & {
  data:XY<Data>[]
};

Stacked Bar Chart Props

type StackedBarChartProps = BaseChartProps & {
  data: XY<Data, Data[]>[]
  seriesNames: string[];
};