React SVG chart
Animated SVG charts for React.
3.9kb gzipped.
Polyfill generators
However, you're currently also going to have to bring babel polyfill to the party at an additional 30.8kb gzipped. This is to support Javascript generators which a dependency of this library makes use of.
Examples
Installation
npm install react-svg-chart
Usage
Bar chart
import React from 'react'; import { BarChart } from 'react-svg-chart'; const App = () => ( <BarChart bars={[ { label: 'travel', value: 11 }, { label: 'accomodation', value: 27 }, { label: 'food', value: 4 }, { label: 'drink', value: 19 }, { label: 'tourism', value: 10 }, ]} height={ 400 } width={ 600 } /> );
Line chart
import React from 'react'; import { LineChart } from 'react-svg-chart'; const App = () => ( <LineChart lines={[ { points: [ { label: 'travel', value: 11 }, { label: 'accommodation', value: 27 }, { label: 'food', value: 4 }, { label: 'drink', value: 19 }, { label: 'tourism', value: 10 }, ]}, ]} height={ 400 } width={ 600 } /> );
CommonJS
This is how you get to the good stuff if you're using require
.
const ReactSVGChart = require( 'react-svg-chart' ); const BarChart = ReactSVGChart.BarChart; const LineChart = ReactSVGChart.LineChart;
UMD
And if you just want to smash in a Javascript file you're also covered. Drop this in place ...
https://unpkg.com/[email protected]/dist/react-svg-chart.min.js
Then access it on the ReactSVGChart
global variable.
const BarChart = ReactSVGChart.BarChart; const LineChart = ReactSVGChart.LineChart;
Props
BarChart
bars
– required – an array of bar objects (each object should contain alabel
and avalue
)barSpacing
– the length between each barclassName
– the SVG classdescription
– the SVG descriptionduration
– the duration in milliseconds of the animation on data changeeasing
– the name of the easing function to use for the animation on data changeformatValue
– the function to format the bar values for displayheight
– the SVG heightlabelSpacing
– the length between a label and the y-axislabelWidth
– the width to the left of the y-axispreserveAspectRatio
– the SVG preserveAspectRatio valueshowLabels
– show / hide labelstitle
– the SVG titlevalueSpacing
– the length between the value and the end of a barwidth
– the SVG width
LineChart
className
– the SVG classdescription
– the SVG descriptionduration
– the duration in milliseconds of the animation on data changeeasing
– the name of the easing function to use for the animation on data changeformatValue
– the function to format the bar values for displayheight
– the SVG heightlabelHeight
– the label heightlabelOffset
– the length between the center of a label and the x-axislines
– required – an array of line objects (each object should contain apoints
array)pointSize
– the points diameterpreserveAspectRatio
– the SVG preserveAspectRatio valueshowLabels
– show / hide labelstitle
– the SVG titlevalueBorderRadius
– the border-radius of the value backgroundvalueHeight
– the value heightvalueOffset
– the length between the center of a point and the center of it's valuevalueWidth
– the value widthwidth
– the SVG width
Help make this better
Issues and pull requests gratefully received!
I'm also on twitter @colinmeinke.
Thanks
License
ISC.