Charts

• Data visualisation

• Dashboard design

• Dashboard

• 2,480

  DataCard

• 8,412

  +12%

  StatTile

• 60%

  Meter

• Sparkline

• DataTable

• LineChart

• BarChart

• RankedBars

• StackedBars

• Histogram

• Funnel

• Heatmap

• Scatter

• SmallMultiples

• Chart

• ChartLegend

• ChartPatterns

• 1,204

  ChartTooltip

• Show dashboard

• Portfolio dashboard

• Audience dashboard

Setup

Pieces that work anywhere, such as StatTile and DataTable, ship from @oztix/roadie-components. The chart frame and DashboardView ship from @oztix/roadie-charts. Import every stylesheet you use.

@import '@oztix/roadie-core/css';
@import '@oztix/roadie-components/css';
@import '@oztix/roadie-charts/css';

Describe any dashboard as JSON and check it with validateDashboard from @oztix/roadie-core/dashboard. The reference dashboards are written this way.

Static and tables

@oztix/roadie-charts/static draws any chart as a standalone SVG file for reports, PDFs and slides. Pass renderChartSvg a chart definition, such as lineChart, the same props the live chart takes, a mode and a size. The file carries its own font, colours and accessible name, so it reads the same outside the app.

import { lineChart, renderChartSvg } from '@oztix/roadie-charts/static'

const svg = renderChartSvg(lineChart, pace, {
  mode: 'light',
  width: 640,
  height: 260
})

@oztix/roadie-charts/tables builds the rows behind each chart's Table view without loading the chart engine. Call it on the server to send exact numbers with a report, or to fill a DataTable. For a dashboard description, plotTable takes any chart card's plot, and cardTable takes a whole card and returns its table, ready for an action such as Download CSV.

import { lineChartTable } from '@oztix/roadie-charts/tables'

const { columns, rows } = lineChartTable(pace)