https://github.com/radzionc/increaser-charts

Charts Library by Increaser
https://github.com/radzionc/increaser-charts

data-visualization react

Last synced: about 12 hours ago
JSON representation

Charts Library by Increaser

• Host: GitHub
• URL: https://github.com/radzionc/increaser-charts
• Owner: radzionc
• License: mit
• Created: 2018-12-22T03:36:50.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T01:42:09.000Z (7 months ago)
• Last Synced: 2024-08-09T03:17:05.564Z (3 months ago)
• Topics: data-visualization, react
• Language: JavaScript
• Homepage: https://radzionc.github.io/increaser-charts/
• Size: 1.6 MB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# increaser-charts

> Charts Library by Increaser

[![NPM](https://img.shields.io/npm/v/increaser-charts.svg)](https://www.npmjs.com/package/increaser-charts)

![alt text](https://user-images.githubusercontent.com/17750556/50489964-b1821d80-0a1b-11e9-8dda-455c089f3961.gif)

## [Demo](https://rodionchachura.github.io/increaser-charts/)

## Install

```bash

npm install --save increaser-charts

```

## Usage

```jsx

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 (

      

         this.setState({ centerBarIndex })}

          selectCenterBarOnScroll={selectCenterBarOnScroll}

          showScroll={showScroll}

        />

      

    )

  }

}

```

## [Blog Post](https://geekrodion.com/blog/barchart-react)

## License

MIT © [RodionChachura](https://geekrodion.com)