Newlyweds Proposing Marriage

    react-comps-svg-charts

    1.0.8 • Public • Published

    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'))
     

    When it gets rendered

    Bar Chart

    Bar Chart

    Line Chart

    Line Chart

    Percentage Chart

    Percentage Chart

    Pie Chart

    Pie Chart

    Scatter Chart

    Scatter Chart

    Keywords

    none

    Install

    npm i react-comps-svg-charts

    DownloadsWeekly Downloads

    4

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    187 kB

    Total Files

    15

    Last publish

    Collaborators

    • charlesrocha