The Once UI data-viz module is a collection of opinionated chart solutions built on top of Recharts and Date-fns. It was designed to help you create beautiful and interactive charts with minimal code.
The default settings for the data viz module are stored in the src/resources/data.config.js file. You can use it to define the default height, highlight color, data mode and variant.
All charts share the same props for common settings, so it's easy to swap between different chart types with minimal code changes. Each chart may have additional, chart-specific props.
Every chart takes these. The sections below walk through the ones worth explaining; this is the whole list.
Use the series and data props to define the chart data to render, and assign colors to override defaults.
The series prop is an array of objects, where each object has a key property that defines the name of the series, and an optional color property that defines the color of the series. Match the key property with the property name in the data prop.
When working with time series data, use the date prop to define the date format. Alternatively, you can translate the date values to Date objects to render the dates based on the default format.
Rows typed with your own interface and readonly arrays are taken as they are, so the type you already have for the data is the one you pass.
Render textual context above the chart with the title and description props.
Use the axis prop to control the visibility of the x and y axis.
Use the legend prop to control the visibility, position, and direction of the legend.
Use the date prop to define the date format and datepicker visibility and options.
Set the variant prop to gradient, flat, or outline to change the chart's appearance.
Use the data-viz-style prop to change the chart's color mode to categorical, divergent, or sequential.
Colors are assigned automatically. You can override them in the series prop.
When using data-viz-style="divergent" or data-viz-style="sequential", we recommend using the default colors, since they are distributed evenly.
You can override the default container styles with Flex props.
Charts fetch nothing themselves, so the four states of a request are props you set from wherever the data comes from. Handle them and a chart degrades into a readable panel rather than an empty frame.
An empty data array is not an error — it means the query ran and matched nothing, which is why emptyState is separate from errorState. Passing loading rather than withholding the chart keeps the panel's height stable, so the page does not jump when the data lands.
grid and axis are separate on purpose: a bar chart usually wants horizontal guides to compare heights against (grid="y") while still labelling both axes, and a sparkline-style chart wants axis="none" with the grid left on.