Gauge

Important Note for the React Kit: In order to leverage this kit, you must install highcharts and highcharts-react-official into your project as shown below. To then apply Playbook styles to your Highchart, import gaugeTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

Default


Disable Animation


Title


Units


Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix 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


Color Overrides


Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop plotOptions.solidgauge.borderColor with a Playbook token like colors. + data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8. Hex colors are also available eg: #CA0095

Complex


We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).


Available Props