react-svg-line-chart

2.0.2 • Public • Published

react-svg-line-chart

npm package Travis Codecov Module formats

A lightweight responsive line chart component for React using only SVG

Getting started

react-svg-line-chart

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

Contributing

  • ⇄ Pull/Merge requests and ★ Stars are always welcome.
  • For bugs and feature requests, please create an issue.
  • Pull requests must be accompanied by passing automated tests (npm test).

See CONTRIBUTING.md guidelines

Changelog

See changelog

License

This project is licensed under the MIT License - see the LICENCE.md file for details

Package Sidebar

Install

npm i react-svg-line-chart

Weekly Downloads

159

Version

2.0.2

License

MIT

Unpacked Size

208 kB

Total Files

17

Last publish

Collaborators

  • cedricdelpoux