@chartiful/react-chart-builder v0.1.6
React Charts
A chart library for React. Currently there is support for vertical bar graphs, horizontal bar graphs, and line graphs, with support coming for scatter plots, pie charts, progress rings, and heat maps.
BaseChartConfig
startAtZero
?: booleanhasXAxisLabels
?: booleanhasYAxisLabels
?: booleanxAxisLabelCount
?: number (defaults to:4
)xAxisLabelStyle
?: {fontFamily
?: stringfontSize
?: numberfontWeight
?: numbercolor
?: stringrotation
?: numberxOffset
?: numberyOffset
?: numberprefix
?: stringsuffix
?: string,position
?: string (accepts:'left'
or'right'
. Defaults to:'left'
)width
?: number,decimals
?: number
}
yAxisLabelStyle
?: {fontFamily
?: stringfontSize
?: numberfontWeight
?: numbercolor
?: stringrotation
?: numberxOffset
?: numberyOffset
?: numberheight
?: number
}
hasXAxisBackgroundLines
?: booleanhasYAxisBackgroundLines
?: booleanxAxisBackgroundLineStyle
?: {strokeWidth
?: numbercolor
?: string
}
yAxisBackgroundLineStyle
?: {strokeWidth
?: numbercolor
?: string
}
Vertical Bar Graph
Installation
npm i @chartiful/react-chart-builder @chartiful/react-vertical-bar-graph
Example
import VerticalBarGraph from '@chartiful/react-vertical-bar-graph'
<VerticalBarGraph
data={[20, 45, 28, 80, 99, 43, 50]}
labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
width={500}
height={300}
barRadius={5}
barWidthPercentage={0.65}
barColor='#53ae31'
baseConfig={{
hasXAxisBackgroundLines: false,
xAxisLabelStyle: {
position: 'right',
prefix: '$'
}
}}
style={{
marginBottom: 30,
padding: 10,
paddingTop: 20,
borderRadius: 20,
backgroundColor: `#dff4d7`,
width: 500
}}
/>
Interface
height
: numberwidth
: numberdata
:<Array>number
labels
?:<Array>string
(defaults to[1, 2, 3, ...]
)barRadius
?: number (defaults to0
)barWidthPercentage
?: number (defaults to0.7
)barColor
?: string (defaults to#000000
)style
?:ReactNative.StyleSheet
baseConfig
?:BaseChartConfig
(found here: link)
Line Graph
Installation
npm i @chartiful/react-chart-builder @chartiful/react-line-graph
Example
import LineGraph from '@chartiful/react-line-graph'
<LineGraph
data={[10, 15, 7, 20, 14, 12, 10, 20]}
width={500}
height={300}
lineColor='#347975'
dotColor='#347975'
lineWidth={3}
isBezier
hasDots={true}
baseConfig={{
startAtZero: false,
hasXAxisBackgroundLines: false,
xAxisLabelStyle: {
prefix: '$',
offset: 0
}
}}
style={{
marginBottom: 30,
padding: 10,
paddingTop: 20,
borderRadius: 20,
width: 500,
backgroundColor: `#dbf0ef`
}}
/>
Interface
height
: numberwidth
: numberdata
:<Array>number
labels
?:<Array>string
(defaults to[1, 2, 3, ...]
)hasLine
?: boolean (defaults totrue
)lineColor
?: string (defaults to'#000000'
)lineWidth
?: number (defaults to3
)hasDots
?: boolean (defaults totrue
)dotColor
?: string (defaults to'#000000'
)dotSize
?: number (defaults to5
)isBezier
?: boolean (defaults tofalse
)hasShadow
?: boolean (defaults tofalse
)style
?:ReactNative.StyleSheet
baseConfig
?:BaseChartConfig
Horizontal Bar Graph
Installation
npm i @chartiful/react-chart-builder @chartiful/react-horizontal-bar-graph
Example
import HorizontalBarGraph from '@chartiful/react-horizontal-bar-graph'
<HorizontalBarGraph
data={[125, 100, 50, 75, 100, 125]}
labels={['Q1, 2019', 'Q2, 2019', 'Q3, 2019', 'Q4, 2019', 'Q1, 2020', 'Q2, 2020']}
width={500}
height={300}
barRadius={7}
barColor='#82d551'
baseConfig={{
hasYAxisBackgroundLines: false,
xAxisLabelStyle: {
rotation: 0,
fontSize: 11,
width: 60,
yOffset: 4,
xOffset: -12
},
yAxisLabelStyle: {
rotation: 30,
fontSize: 13,
prefix: '$',
position: 'bottom',
xOffset: 15,
yOffset: -10,
decimals: 2,
height: 50
}
}}
style={{
marginBottom: 30,
padding: 10,
paddingTop: 20,
borderRadius: 20,
width: 500,
backgroundColor: `#e1f5d6`
}}
/>
Interface
height
: numberwidth
: numberdata
:<Array>number
labels
?:<Array>string
(defaults to[1, 2, 3, ...]
)barRadius
?: number (defaults to0
)barWidthPercentage
?: number (defaults to0.7
)barColor
?: string (defaults to#000000
)style
?:ReactNative.StyleSheet
baseConfig
?:BaseChartConfig
(found here: link)