Distribution Bar

Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers. To add numbers to this chart, you can use the Legend kit with prefix text.

Summary

React Rendered

Default

import React from 'react'
import DistributionBar from 'playbook-ui'

const DistributionBarDefault = (props) => {
  return (
    <React.Fragment>
      <div>
        <DistributionBar
            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
        />
      </div>
      <br />
      <br />
      <div>
        <DistributionBar
            size="sm"
            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
        />
      </div>
    </React.Fragment>
  )
}

export default DistributionBarDefault

Custom Colors

You can customize the order of the colors you would like to use by using the colors prop. Only the data and status colors will work for Playbook charts. See the design page for reference.

import React from 'react'
import DistributionBar from 'playbook-ui'

const DistributionBarCustomColors = (props) => {
  return (
    <React.Fragment>
      <div>
        <DistributionBar
            colors={['data_7', 'data_1', 'neutral']}
            widths={[4, 5, 3]}
        />
      </div>
    </React.Fragment>
  )
}

export default DistributionBarCustomColors

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat