11.0.1

Charts And Graphs




Bar Graph

Default


Legend


Legend Non Clickable


Height


Spline


A spline can be added by including a separate chart data with the type: 'spline' attribute.
A color can also be specified for the spline.

Color Overrides


Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8 in an array. Hex colors are also available eg: #CA0095

Circle Chart

Default Style


Live Data


Rounded Corners


Accepts Any Block


Color Overrides


Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8 in an array. Hex colors are also available eg: #CA0095

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


Color Overrides


Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use ONE desired value data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8 in an array. Hex colors are also available eg: #CA0095

Legend

Default


With Prefix Text


Colors


By default legend kit uses data_1 color.
Pass the color prop and use any desired value from $data_colors, $status_colors, $product_colors and $category_colors list.

Line Graph

Default


Legend


Legend Nonclickable


Height


Color Overrides


Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8 in an array. Hex colors are also available eg: #CA0095

Treemap Chart

Default


Points are automatically arranged by their value size.

By default, point colors are assigned sequentially from the global data colors. Note that data points without a value (such as parent nodes) will still take on the next available color.

Grouped Data


Data can be grouped into distinct segments by specifying the relationship in the chartData. For a point to be a parent, it needs an id of type string included in its object. Any other data points may then reference that id as their parent value to establish the tree structure.

Parents can also be passed a custom color to be applied to all of its child points.

Drillable


Adding the drillable prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the chartData, detailed in the Grouped Data section above.

Color Overrides


Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use desired values data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8 in an array. Hex colors are also available eg: #CA0095

Tooltip Customization


A custom tooltip format can be specified. The desired format can be passed as a string of custom HTML to the tooltipHtml prop.

{point.name} and {point.value} are useful values that can be referenced for each point in the graph.