8.1.0

Charts And Graphs




Bar Graph

Default


Legend


Legend Non Clickable


Height


Circle Chart

Default Style


Live Data


Rounded Corners


Accepts Any Block


Color Overrides


Data Labels


Legend


Title


Inner Circle Size Options


Distribution Bar

Default


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.

Gauge

Default


Disable Animation


Title


Units


Full Circle


Min Max Labels


Min defaults to 0, Max to 100.

Sizing


Gauge resizes dynamically to fit whatever element it's placed within.

Note: set overflow to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

Height


Live Data


Legend

Default


With Prefix Text


Line Graph

Default


Legend


Legend Nonclickable


Height