Charts

The because.chart() builder constructs a ChartGroup for use as span input or output.

Basic usage

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

`because.chart(type, title?)`

Returns a ChartBuilder. Chain methods and call .build() to get a ChartGroup.

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

Wrap multiple ChartGroup objects to render them together in one span:

because.addSpan('chart', 'dashboard', {
  output: {
    charts: [
      because
        .chart('line', 'Revenue')
        .labels(months)
        .series('$', revenue)
        .build(),
      because
        .chart('bar', 'By Region')
        .labels(regions)
        .series('Sales', sales)
        .build()
    ]
  }
});

Example: bar chart from records

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

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

On this page