Charts Library by Increaser
npm install --save increaser-chartsimport 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>
)
}
}MIT © RodionChachura