Charts

Add line, bar, pie and scatter charts to a Node.js trace with the recount.chart builder.

The recount.chart() builder constructs a single ChartData object. Call .build() to get a value ready to pass directly as span input or output.

Basic usage

recount.addSpan('chart', 'Monthly revenue', {
  output: recount
    .chart('line', 'Monthly Revenue')
    .labels(['Jan', 'Feb', 'Mar', 'Apr'])
    .series('Revenue', [12000, 15400, 11200, 18900])
    .build()
});

`recount.chart(type, title?)`

Returns a ChartBuilder. Chain methods and call .build() to get a ChartData object, ready to use as span input or output.

Chart types

Type	Description
`'line'`	Line chart
`'bar'`	Bar chart
`'pie'`	Pie / donut chart
`'scatter'`	Scatter plot

Methods

`.labels(labels)`

Set the category labels (x-axis for line/bar, slice names for pie).

.labels(['Q1', 'Q2', 'Q3', 'Q4'])

`.series(name, data)` / `.series(data)`

Add a data series. Call multiple times for multi-series charts.

.series('Revenue', [1200, 1500, 900, 2100])
.series('Cost',    [800,  900,  700, 1100])

Omit the name for single-series charts:

.series([1200, 1500, 900, 2100])

`.fromRecords(data, labelKey, seriesKeys)`

Build labels and series from an array of records.

.fromRecords(rows, 'month', ['revenue', 'cost'])

`.referenceLine(value, label?)`

Add a horizontal reference line (e.g. a target or threshold).

.referenceLine(10000, 'Target')

Multiple charts

To display multiple charts together, use a group span. Each chart is its own span inside the group:

recount.addGroup('Claims dashboard', (g) => {
  g.span('chart', 'Claims by Month', {
    output: recount
      .chart('line', 'Claims by Month')
      .labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'])
      .series('Submitted', [142, 158, 134, 171, 163, 189])
      .series('Approved', [118, 131, 109, 144, 140, 162])
      .build()
  });

  g.span('chart', 'By Category', {
    output: recount
      .chart('bar', 'By Category')
      .labels(['Vehicle', 'Property', 'Medical', 'Liability'])
      .series('Count', [312, 187, 94, 56])
      .build()
  });
});

Bar chart from records

const rows = [
  { plan: 'Starter', users: 412 },
  { plan: 'Pro', users: 1839 },
  { plan: 'Enterprise', users: 264 }
];

recount.addSpan('chart', 'Plan distribution', {
  output: recount
    .chart('bar', 'Users by Plan')
    .fromRecords(rows, 'plan', ['users'])
    .build()
});

Shorthand export

For simple cases where you don't need to chain builder methods:

`recount.chartFromRecords({ type, data, labelKey, seriesKeys, title? })`

Equivalent to recount.chart(type, title).fromRecords(data, labelKey, seriesKeys).build(). Returns ChartData directly.

const rows = [
  { month: 'Jan', revenue: 12000 },
  { month: 'Feb', revenue: 15400 },
  { month: 'Mar', revenue: 11200 }
];

recount.addSpan('chart', 'revenue', {
  output: recount.chartFromRecords({
    type: 'line',
    title: 'Monthly Revenue',
    data: rows,
    labelKey: 'month',
    seriesKeys: ['revenue']
  })
});

On this page