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/react-svg-chart@4.0.0/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 alabeland 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 apointsarray)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 :star2:
License
ISC.