increaser-charts

Charts Library by Increaser

Demo

Install

npm install --save increaser-charts

Usage

import React, { Component } from 'react'

import { BarChart } from 'increaser-charts'

const bars = [
  {
    label: 'first'
    text: '15
    items: [{
      value: 10,
      color: 'gold'
    }, {
      value: 5,
      color: 'black'
    }]
  },
  {
    label: 'second',
    text: 8
    items: [{
      value: 8,
      color: 'black'
    }]
  }
]

// optional
const theme = {
  mainColor: 'white',
  scrollerBackgroundColor: 'rgba(255, 255, 255, 0.15)',
  labelFontSize: 12
}

class Example extends Component {
  constructor(props) {
    super(props)
    const barsNumber = 60
    const barsWithLabels = true
    this.state = {
      centerBarIndex: undefined,
      barWidth: 35,
      barSpace: 8,
      barsNumber,
      barsWithLabels,
      bars,
      showScroll: true,
      selectCenterBarOnScroll: true
    }
  }
  render () {
    const {
      centerBarIndex,
      barWidth,
      barSpace,
      bars,
      selectCenterBarOnScroll,
      barsWithLabels,
      barsWithTexts,
      showScroll
    } = this.state
    return (
      <Wrapper>
        <BarChart
          theme={theme}
          bars={bars}
          barWidth={barWidth}
          barSpace={barSpace}
          barsWithLabels={barsWithLabels}
          barsWithTexts={barsWithTexts}
          centerBarIndex={centerBarIndex}
          onBarSelect={(centerBarIndex) => this.setState({ centerBarIndex })}
          selectCenterBarOnScroll={selectCenterBarOnScroll}
          showScroll={showScroll}
        />
      </Wrapper>
    )
  }
}

Story on Medium

License

MIT © RodionChachura