Neatly Punctuated Musings

    rumble-charts
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    Logo rumble-charts

    Node.js CI CodeQL codecov

    Maintainability Rating Quality Gate Status Reliability Rating Security Rating Vulnerabilities

    npm npm Bundle size Tree shaking

    React components for building composable and flexible charts to visualize your data.

    It's based on D3.js under the hood, but most of the time you will not feel that.

    Real-world examples

    Pie Charts

    Bar Charts

    Line Chart

    Documentation

    All examples are live editable on "Playroom" tab.

    https://rumble-charts.github.io

    Demo / live edit

    https://rumble-charts.github.io/playroom/

    Installation

    NPM

    npm install --save rumble-charts

    CDN

    <script src='https://unpkg.com/rumble-charts/umd/rumble-charts.min.js'></script>

    Usage

    Just include it:

    import {
      // main component
      Chart,
      // graphs
      Bars, Cloud, Dots, Labels, Lines, Pies, RadialLines, Ticks, Title,
      // wrappers
      Layer, Animate, Transform, Handlers,
      // helpers
      helpers, DropShadow, Gradient
    } from 'rumble-charts';

    And use:

    const series = [{
      data: [1, 2, 3]
    }, {
      data: [5, 7, 11]
    }, {
      data: [13, 17, 19]
    }];
    
    <Chart width={600} height={250} series={series} minY={0} maxY={20}>
      <Bars innerPadding={5} groupPadding={10} />
      <Lines />
      <Dots />
    </Chart>;

    Result:

    Combined Chart

    Changelog

    Road map

    License

    MIT

    Install

    npm i rumble-charts

    DownloadsWeekly Downloads

    327

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    656 kB

    Total Files

    152

    Last publish

    Collaborators

    • rosko