Miss any of our Open RFC calls?Watch the recordings here! »

@auguststurm/react-d3-charts

1.0.18 • Public • Published

@auguststurm/react-d3-charts

A React & D3 charting package.

NPM JavaScript Style Guide

Live Demo

https://auguststurm.github.io/react-d3-charts/

Install from NPM

yarn add @auguststurm/react-d3-charts

Test Components

yarn test:components

Run Example

/react-d3-charts/example
 
yarn install
 
yarn start

Example Data

The examples data can be found in the following directory:

example/src/data

Usage

import React, { Component } from 'react'
 
import {
  dataBarChart,
  dataPieChart,
  dataLineChart,
  dataHexbinChart,
  dataMultiLineChart,
  dataStackedBarChart,
  dataEventsTimeline
} from './data';
 
import {
  BarChart,
  BarChartHorizontal,
  PieChart,
  LineChart,
  HexbinChart,
  MultiLineChart,
  StackedBarChart,
  StackedBarChartHorizontal,
  EventsTimeline
} from '@auguststurm/react-d3-charts';
 
import '@auguststurm/react-d3-charts/dist/index.css'
 
class Example extends Component {
 
  handleEventsTimelineEventSelection = (event) => {
    console.log('EventsTimeline:');
    console.log(event);
  }
 
  render() {
    return (
 
      <EventsTimeline
        dark={true}
        width={1200}
        barHeight={20}
        barPadding={0.2}
        margin={{
          top: 10,
          right: 15,
          bottom: 20,
          left: 80
        }},
        dateFormat={'YYYY-MM-DD'}
        data={dataEventsTimeline}
        showLabels={true}
        showTooltips={true}
        showLeftAxis={true}
        handler={this.handleEventsTimelineEventSelection}
      />
 
      <StackedBarChartHorizontal
        dark={true}
        width={900}
        barHeight={20}
        margin={{
          top: 10,
          right: 15,
          bottom: 20,
          left: 80
        }}
        dataKeys={['<10', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '≥80']}
        data={dataStackedBarChart}
      />
 
      <StackedBarChart
        dark={true}
        width={900}
        height={500}
        margin={{
          top: 10,
          right: 0,
          bottom: 20,
          left: 35
        }}
        dataKeys={['<10', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '≥80']}
        data={dataStackedBarChart}
      />
 
      <MultiLineChart
        dark={true}
        width={900}
        height={300}
        margin={{
          top: 15,
          right: 0,
          bottom: 20,
          left: 35
        }}
        data={dataMultiLineChart}
      />
 
      <HexbinChart
        dark={true}
        width={800}
        height={500}
        margin={{
          top: 20,
          right: 20,
          bottom: 30,
          left: 40
        }}
        radius={5}
        data={dataHexbinChart}
      />
 
      <LineChart
        dark={true}
        width={900}
        height={300}
        margin={{
          top: 15,
          right: 50,
          bottom: 20,
          left: 35
        }}
        dateFormat={'YYYY-MM-DD'}
        data={dataLineChart}
      />
 
      <PieChart
        diameter={300}
        innerRadius={0.618}
        labelSize={11}
        data={dataPieChart}
      />
 
      <BarChartHorizontal
        dark={true}
        width={850}
        barHeight={16}
        margin={{
          top: 30,
          right: 0,
          bottom: 10,
          left: 30
        }}
        data={dataBarChart}
      />
 
      <BarChart
        dark={true}
        width={850}
        height={275}
        margin={{
          top: 15,
          right: 0,
          bottom: 20,
          left: 35
        }}
        data={dataBarChart}
      />
 
    )
  }
}

License

MIT © August Sturm

Keywords

none

Install

npm i @auguststurm/react-d3-charts

DownloadsWeekly Downloads

36

Version

1.0.18

License

MIT

Unpacked Size

217 kB

Total Files

10

Last publish

Collaborators

  • avatar