Trend chart · Orbex Sonar-DB Design System

Examples

Daily shipments in April

Code

tsx

/* A month day by day, with its running total: daily shipments in April */
import { TrendChart } from '@orbex/sonar-components/trend-chart'
import '@orbex/sonar-components/trend-chart.css'

const shipped = [
  355, 375, 310, 510, 405, 430, 325, 305, 300, 285, 405, 455, 370, 295, 350, 445, 450, 395, 365, 335, 310, 360, 345, 285,
  485, 360, 365, 340, 330, 375,
]
const days = shipped.map((_, index) => `Apr ${index + 1}`)
const total = shipped.reduce((sum, value) => sum + value, 0)

export default function Trend() {
  return (
    <div style={{ width: 'min(100%, 560px)' }}>
      <TrendChart
        label={`Daily shipments in April, ${total.toLocaleString('en-US')} pallets in total`}
        categories={days}
        series={{ name: 'Shipments (plt)', values: shipped }}
        cumulative={{ name: 'Cumulative (plt)' }}
        unit="plt"
        axisLabels={[0, 14, days.length - 1]}
      />
    </div>
  )
}

Usage

One series, and its running total when the month’s sum matters. Days still to come are null and leave the line open.
Label three days on the axis: the first, the middle and the last.
The width follows its container; the height is a prop.

Do and don’t

DoA month day by day, with its key figure stated in text beside the chart.

Don’tThe chart alone: people have to read the line to find the figure they came for.

DoA series that is off keeps its name readable, with a hollow marker.

Don’tA faded series: its name drops below a readable contrast.

Accessibility

Keyboard

Key	What it does
Tab	Reaches the chart and then its legend buttons.
Left and Right arrows	Read the previous or next day.
Home and End	Go to the first day or the last day with data.
Escape	Clears the day being read.
Enter or Space	On a legend button: shows or hides that series.

Roles and attributes

Element or attribute	What it gives
`role="group"`	Named by its label, with a hint to use the arrow keys.
`aria-live="polite"`	Reads the chosen day: “May 12: 350 plt, 4,485 plt so far”.
`aria-pressed`	Legend buttons say whether their series is shown.

Notes

The chart is a group with a live region: the day being read is announced with both values.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { TrendChart } from '@orbex/sonar-components/trend-chart'
import '@orbex/sonar-components/trend-chart.css'

API

Props of TrendChart
Prop	Type	Default
`label` Required One sentence that sums the chart up, read first: “Daily shipments in May, 11,940 pallets in total”.	`string`	—
`categories` Required The label of each point along the x axis, such as the days of the month.	`string[]`	—
`series` Required The series drawn as a solid line. Missing points (null) leave a gap: days still to come.	`{ name: string; values: (number \| null)[] }`	—
`cumulative` A second series drawn dotted against its own axis on the right: the running total of the first.	`{ name: string }`	—
`unit` Required Unit of the values, after each figure in the tooltip.	`string`	—
`axisLabels` Indices of the categories labeled on the x axis.	`number[]`	`first, middle and last`
`height` Height of the chart in pixels, axes included. The width follows its container.	`number`	`200`
`className` Classes added to the chart’s root element, after sonar-trend-chart.	`string`	—