Numbers Produce Meaning

    @chartiful/react-vertical-bar-graph
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

    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)

    Install

    npm i @chartiful/react-vertical-bar-graph

    DownloadsWeekly Downloads

    2

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • sean_watters