React-svg-line-chart NPM

react-svg-line-chart

A lightweight responsive line chart component for React using only SVG

Getting started

You can download react-svg-line-chart from the NPM registry via the npm or yarn commands

yarn add react-svg-line-chart
npm install react-svg-line-chart --save

If you don't use package manager and you want to include react-svg-line-chart directly in your html, you could get it from the UNPKG CDN

https://unpkg.com/react-svg-line-chart/umd/react-svg-line-chart.js

Demo

See Demo page

Usage

import React from 'react'
import LineChart from 'react-svg-line-chart'

const data = []

for (let x = 1; x <= 30; x++) {
    data.push({ x: x, y: Math.floor(Math.random() * (100)) })
}

export default class MyComponent extends React.Component {
    state = {
        activePoint: null,
    }

    handlePointHover = (activePoint, e) => {
        this.setState({activePoint})
    }

    render() {
        const {activePoint} = this.state
        return (
            <LineChart
            data={data.map((point, i) => ({...point, active: point.x === activePoint.x ? true : false}))}
            pointsOnHover={this.handlePointHover}
            />
        )
    }
}

Props

Name	PropType	Description	Default
areaColor	String	Area color (hex, rgb...)	"#34495e"
areaOpacity	Number	Area opacity	.5
areaVisible	Boolean	Area visibility	false
axisColor	Number	Axis color	"#34495e"
axisOpacity	Number	Axis opacity	.5
axisVisible	Boolean	Axis visibility	true
axisWidth	Number	Axis width	1
data	Array of data Objects	data is {x: number, y: number, active: bool})	[]
gridColor	String	Grid color	"#34495e"
gridOpacity	Number	Grid color	.5
gridVisible	Boolean	Grid visibility	true
gridWidth	Number	Grid width	1
labelsCharacterWidth	Number	Labels character with (depending on your font) to calculate the width of Y labels	10
labelsColor	String	Labels color	"#34495e"
labelsCountY	Number	Y labels count	5
labelsFormatX	Function	Custom X labels	x => x
labelsFormatY	Function	Custom Y labels	y => y
labelsHeightX	Number	X labels height (depending on your font)	12
labelsOffsetX	Number	X labels offset	15
labelsOffsetY	Number	Y labels offset	15
labelsStepX	Number	X labels step	1
labelsVisible	Number	Labels visibility	true
pathColor	String	Path color	"#34495e"
pathOpacity	Number	Path opacity	1
pathSmoothing	Number	Between 0 and 1 or null to disable	null
pathVisible	Boolean	Path visibility	false
pathWidth	Number	Path width	1
pointsColor	String	Points color	"#fff"
pointsIsHoverOnZone	Boolean	`pointsOnHover` function callback called on zone hover instead of points hover	false
pointsOnHover	Function	Callback when one point is hovered	(point, event) => {}
pointsRadius	Number	Points radius	4
pointsStrokeColor	String	Points stroke color	"#34495e"
pointsStrokeWidth	Number	Points stroke width	2
pointsVisible	Boolean	Points visibility	true
viewBoxHeight	Number	SVG viewport height	300
viewBoxWidth	Number	SVG viewport width	800