Chart Settings in Dashboard

This guide explains how to choose a chart type in a widget and how to set chart styling directly in the response of a reporting HTTP service — in the format of the billboard.js library that Dashboard uses to draw charts. Connecting a source and a query is covered in the guide to connecting charts.

1. Where the appearance is set

Open the dashboard and click “Edit”.
Hover over a widget and click the “Edit” pencil (or “Add widget” for a new one).
In the “Display” field choose the type, set units, the gauge maximum or the trend line if needed, and save.

2. Display types

Type	When it fits
As in the source	Type, colours and limits come from the service response (section 4). If the source sends no type — a number for one record and a line chart for several.
Number	The latest value as a large number, e.g. the cash balance.
Line chart	Trends by month or day.
Area chart	Trends with emphasis on volume.
Bar chart	Comparing periods, managers, warehouses.
Table	Exact values of the records.
Pie and donut charts	Parts of a whole: sales or cost structure. Positive values are shown; with more than eight parts — the seven largest and “Other”.
Gauge	The latest value against a maximum, e.g. plan fulfilment.
Text (Markdown)	Explanations, hints and links on the dashboard without data.

3. Additional widget settings

Units — shown next to the widget name and in tooltips, e.g. “UAH” or “pcs”.
Gauge maximum — for the gauge and “As in the source”, e.g. a sales plan; it takes priority over the maximum from the response.
Trend line — for line, area and bar charts: a dashed straight line over the main measure shows the overall direction.
Text — for the “Text” type: # heading, **bold**, *italic*, lists with -, links [name](https://…), tables. HTML is not supported.

4. Styling from the service response

The reporting HTTP service returns a chart configuration in the billboard.js format (compatible with C3.js). Dashboard takes the data and part of the styling from it; axes, legends, formats and functions are not applied. The chart type and per-measure types apply in a widget with the “As in the source” type, while colours, gauge limits and thresholds apply with any type.

Line, area, bars

Measures go in data.columns (the first element of a row is the name), axis categories in axis.x.categories. The overall type is data.type: line, area, bar (spline and step are shown as a line, area-spline and area-step as an area). The type of a single measure is data.types, colours are data.colors:

{"data": {
  "columns": [["Sales", 120, 135, 128], ["Plan", 125, 125, 130]],
  "type": "bar",
  "types": {"Plan": "line"},
  "colors": {"Sales": "#0d6efd", "Plan": "#dc3545"}
},
"axis": {"x": {"categories": ["January", "February", "March"]}}}

For dates instead of categories, pass a column of dates in data.x and "axis": {"x": {"type": "timeseries"}}: DD.MM.YYYY and ISO dates are recognised automatically.

Pie and donut charts

{"data": {
  "columns": [["Kyiv", 40], ["Lviv", 25], ["Odesa", 35]],
  "type": "donut"
},
"color": {"pattern": ["#0d6efd", "#20c997", "#ffc107"]}}

Without data.colors, colours are taken from color.pattern in turn.

Gauge with colour thresholds

{"data": {"columns": [["Plan fulfilment", 76]], "type": "gauge"},
"gauge": {"min": 0, "max": 100},
"color": {
  "pattern": ["#dc3545", "#ffc107", "#198754"],
  "threshold": {"values": [50, 80, 100]}
}}

Values up to 50 are red, up to 80 yellow, above that green. Thresholds go in ascending order, with at least as many colours as thresholds; "unit": "value" compares the value itself, otherwise a percentage of max.

What is not applied

Axis and tooltip formats, the legend, sizes, animation, functions written as text and other configuration fields are skipped: Dashboard sets them itself so that charts look the same on every dashboard. To check exactly what the service returned, use the “Source response” button next to the query.

5. Download, print and embedding

In the widget actions — “Download data”: CSV, Excel or a PNG image of the chart.
On the dashboard toolbar — “Print or save as PDF”: prints the dashboard without menus and buttons; choose “Save as PDF” in the print dialog.
In “Access” → “Links”, an open link has an “Embed code”: the dashboard can be placed on a website, in a CRM or an ERP.