Stat Visualisation
Used to highlight a key metric trend over time as a trendline visualisation. They are read only and non filterable.
Useful for when you only have a single dimensions per metric. You can use mutliple instances stacked when you want to show other dimensions that are related in time but are a different metric.
Use the x-axis to represent time
The StatVisualisation component always represents chronological data along the x-axis. Keeping this consistent reduces cognitive dissonance amongst customers.
The visualisation has two variants, StatVisualisation & StatVisualisationWithHover, both are exported from the package. Both components look the same but StatVisualisation allows you to add multiple StatVisualisation's and sync the hover effect. Try it out by hovering over the charts below.
The hover functionality is useful when surfacing information but sometimes you only want one instance of the component and wiring up that interaction for one is time consuming and involves creating state.
In those cases you can use the StatVisualisationWithHover which contains that state within its own instance.
You can use the formatter prop to visually manipulate how the values in the chart look.
- Design
- Implementation
TODO - Design
Product Usage
- Dashboard
- Teams
- Radar