React-comps-svg-charts NPM

React SVG Charts

Inspired by frappe/charts

A set of simple React Components that generates SVG-based charts.

Installation

    npm install react-comps-svg-charts@latest --save

Importing it

Commons JS

  import { BarChart, LineChart, PercentageChart, PieChart, ScatterChart } = require('react-comps-svg-charts');

ES Modules

import { BarChart, LineChart, PercentageChart, PieChart, ScatterChart } from 'react-comps-svg-charts';

UNPKG

<script src="https://unpkg.com/react-comps-svg-charts@1.0.4/dist/lib.js"></script>

Then, just..

  <script>
    window.BarChart;
    //...
  </script>

Examples

import React, { Component } from 'react'
import { render } from 'react-dom'
import PropTypes from 'prop-types'
import {
  BarChart, 
  LineChart, 
  PercentageChart, 
  PieChart, 
  ScatterChart
} from 'react-comps-svg-charts'

import '../../node_modules/react-comps-svg-charts/dist/svg-charts-styles.css'

class App extends React.Component {

  constructor () {
    super()

    this.state = {
      data: {
        labels: ['12am-3am', '3am-6pm', '6am-9am', '9am-12am', '12pm-3pm'],
        datasets: [
          {
            title: 'Some Data',
            color: 'light-blue',
            values: [25, 40, 30, 35, 8]
          },
          {
            title: 'Another Set',
            color: 'violet',
            values: [25, 50, -10, 15, 18]
          }
        ]
      }
    }
  }

  render () {
    return (
      <div>
        <BarChart
          title='Test Bar Chart'
          data={this.state.data}
          height={250}
        />

        <LineChart
          title='Test Line Chart'
          data={this.state.data}
          height={250}
        />

        <PercentageChart
          title='Test Percentage Chart'
          data={this.state.data}
          height={250}
        />
        
        <PieChart
          title='Test Pie Chart'
          data={this.state.data}
          height={250}
        />
        
        <ScatterChart
          title='Test Scatter Chart'
          data={this.state.data}
          height={250}
        />
        
      </div>
    )
  }
}

render(<App />, document.getElementById('app'))