ComboChart

Draws bars for each period with a line on top, usually a moving average.

SourcePackage @kerf-js/veneer

Preview

tsx

import { ComboChart } from '@kerf-js/veneer'export function Requests() {  return (  <ComboChart    title="Monthly bill"    description={      'Bars for each month, the line ' +      'for the three-month average'    }    data={TRAFFIC}    x="month"    xName="Month"    bar={{ key: 'cost', name: 'Bill' }}    window={3}    format={dollars}    axisFormat={thousands}  />  )}const TRAFFIC = [  {    month: 'Nov',    requests: 41.2,    errors: 0.42,    deploys: 88,    cost: 6120,  },  {    month: 'Dec',    requests: 52.8,    errors: 0.51,    deploys: 74,    cost: 6480,  },  {    month: 'Jan',    requests: 47.1,    errors: 0.38,    deploys: 96,    cost: 6390,  },  {    month: 'Feb',    requests: 49.6,    errors: 0.33,    deploys: 104,    cost: 6710,  },  {    month: 'Mar',    requests: 58.3,    errors: 0.47,    deploys: 118,    cost: 7240,  },  {    month: 'Apr',    requests: 61.9,    errors: 0.29,    deploys: 126,    cost: 7380,  },  {    month: 'May',    requests: 66.4,    errors: 0.31,    deploys: 131,    cost: 7690,  },  {    month: 'Jun',    requests: 64.2,    errors: 0.44,    deploys: 122,    cost: 7620,  },  {    month: 'Jul',    requests: 71.5,    errors: 0.27,    deploys: 139,    cost: 8010,  },  {    month: 'Aug',    requests: 74.8,    errors: 0.25,    deploys: 144,    cost: 8230,  },  {    month: 'Sep',    requests: 79.3,    errors: 0.36,    deploys: 152,    cost: 8560,  },  {    month: 'Oct',    requests: 86.1,    errors: 0.22,    deploys: 167,    cost: 8930,  },]const dollars = (v: number) =>  `$${v.toLocaleString('en-US')}`const thousands = (v: number) =>  `$${(v / 1000).toFixed(1)}k`

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ComboChart } from '@kerf-js/veneer'

Accessibility

Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	—	The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section.
`description`	`unknown`	—	One supporting line under the title.
`toolbar`	`unknown`	—	Beside the view toggle: a layout switch, a range picker.
`state`	`"error" \| "loading" \| "empty"`	—	Replaces the plot, in the same frame. With no data the frame shows `empty` on its own.
`loading`	`string`	—	Shows that work is under way.
`empty`	`{ title: string; detail?: unknown; }`	—	The title and detail shown in place of the plot when there is no data.
`error`	`{ title: string; detail?: unknown; }`	—	A message that marks the field invalid and says why.
`action`	`unknown`	—	The next step under an empty or error state: a Retry button.
`data`	`object[]`	—	The series to draw.
`summary`	`string \| ((c: { data: object[]; title: string; }) => string)`	—	One sentence for screen readers and the page; generated from the data when absent.
`x`	`string`	—	The key in each row that names the period.
`bar`	`SeriesDef`	—	The series drawn as bars.
`line`	`SeriesDef`	—	The series drawn as the line. Leave it out for a moving average.
`window`	`number`	—	How many periods the moving average covers.
`format`	`Fmt`	—	Turns a value into the text shown.
`axisFormat`	`Fmt`	—	A shorter format for the axis alone.
`xName`	`string`	—	What the x values are, for the table and tooltips.

RelatedBar chart Line chart