@chartiful/react-vertical-bar-graph

React vertical bar graph.

Usage no npm install needed!

<script type="module">
  import chartifulReactVerticalBarGraph from 'https://cdn.skypack.dev/@chartiful/react-vertical-bar-graph';
</script>

README

Vertical Bar Graph

NPM package

bar graph image

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}
  baseConfig={{
    hasXAxisBackgroundLines: false,
    xAxisLabelStyle: {
      position: 'right',
      prefix: '


    }
  }}
  style={{
    paddingVertical: 10
  }}
/>

Interface

  • height: number

  • width: number

  • data: <Array>number

  • labels?: <Array>string (defaults to [1, 2, 3, ...])

  • barRadius?: number (defaults to 0)

  • barWidthPercentage?: number (defaults to 0.7)

  • barColor?: string (defaults to #000000)

  • style?: ReactNative.StyleSheet

  • baseConfig?: BaseChartConfig (found here: link)