chart

Charts: bar, line and area charts drawn as SVG on the server, in the theme’s chart colours.

chart.bar(
  title: "Revenue by month",
  labels: ["Jan", "Feb", "Mar"],
  series: [
    chart.Series("Online", [4200.0, 5100.0, 6100.0]),
    chart.Series("In store", [3100.0, 2900.0, 3300.0]),
  ],
)
|> chart.view

Every series is one entry per label. Series take the theme’s chart colours in order, so a series keeps its colour as long as it keeps its place: when a filter removes some, pass the survivors in the same order with colours rather than letting them shift. There are five colours; past five series, fold the rest into an “Other” series or draw several charts. A sixth and later series is drawn in the muted text colour.

Hovering over or focusing a label’s column shows every series’ value there; with Tab a keyboard reaches each column, and a screen reader reads the same values. Under the chart, “Show data” opens the numbers as a table. None of it needs a script.

The value axis always includes zero, so bars grow from a baseline and a line’s height is honest. Two measures on different scales belong in two charts, never on two axes of one.

Types

Chart

opaque </>

pub opaque type Chart

Kind

</>

pub type Kind {
  Bar
  Line
  Area
  Pie(hole: Float)
  Radial(max: Float)
  Radar
}

Constructors

```
Bar
```
```
Line
```
```
Area
```
```
Pie(hole: Float)
```
Parts of a whole, as slices; hole is the inner radius as a share of the outer, so 0.0 is a pie and about 0.6 a donut.
```
Radial(max: Float)
```
Values out of max, as concentric rings.
```
Radar
```
Several measures around a circle, one polygon per series.

Series

</>

A named list of values, one per label.

pub type Series {
  Series(name: String, values: List(Float))
}

Constructors

Series(name: String, values: List(Float))

Values

area

</>

pub fn area(
  title title: String,
  labels labels: List(String),
  series series: List(Series),
) -> Chart

Lines with a light wash beneath, for volumes over time.

bar

</>

pub fn bar(
  title title: String,
  labels labels: List(String),
  series series: List(Series),
) -> Chart

Columns, grouped by label when there are several series.

bar_down_class

</>

pub fn bar_down_class() -> css.Class

bar_group_class

</>

pub fn bar_group_class() -> css.Class

bar_slot_class

</>

pub fn bar_slot_class() -> css.Class

bar_up_class

</>

pub fn bar_up_class() -> css.Class

baseline_class

</>

pub fn baseline_class() -> css.Class

caption_class

</>

pub fn caption_class() -> css.Class

centre_label_class

</>

pub fn centre_label_class() -> css.Class

centre_value_class

</>

pub fn centre_value_class() -> css.Class

chart_class

</>

pub fn chart_class() -> css.Class

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

colours

</>

pub fn colours(chart: Chart, colours: List(Int)) -> Chart

Which chart colour, from 1 to 5, each series takes. Use it to keep a series’ colour when others are filtered out.

column_class

</>

pub fn column_class() -> css.Class

crosshair_class

</>

pub fn crosshair_class() -> css.Class

details_class

</>

pub fn details_class() -> css.Class

donut

</>

pub fn donut(
  title title: String,
  labels labels: List(String),
  values values: List(Float),
) -> Chart

A pie with a hole, showing the total in the middle.

dot_class

</>

pub fn dot_class() -> css.Class

end_label_class

</>

pub fn end_label_class() -> css.Class

figure_class

</>

pub fn figure_class() -> css.Class

format

</>

pub fn format(chart: Chart, format: fn(Float) -> String) -> Chart

How values are written on the axis, in readouts and in the table. The default is the words’ decimal: whole numbers with thousands separators and at most two decimal places.

format_number

</>

pub fn format_number(value: Float) -> String

Thousands separators and at most two decimal places: 12,500 or 3.25.

grid_class

</>

pub fn grid_class() -> css.Class

gutter_class

</>

pub fn gutter_class() -> css.Class

highlight_class

</>

pub fn highlight_class() -> css.Class

key_box_class

</>

pub fn key_box_class() -> css.Class

key_line_class

</>

pub fn key_line_class() -> css.Class

legend_class

</>

pub fn legend_class() -> css.Class

line

</>

pub fn line(
  title title: String,
  labels labels: List(String),
  series series: List(Series),
) -> Chart

Lines, for change over an ordered range such as time.

line_class

</>

pub fn line_class() -> css.Class

part_class

</>

pub fn part_class() -> css.Class

part_legend_class

</>

pub fn part_legend_class() -> css.Class

part_name_class

</>

pub fn part_name_class() -> css.Class

pie

</>

pub fn pie(
  title title: String,
  labels labels: List(String),
  values values: List(Float),
) -> Chart

Parts of a whole as slices, with each part’s value and share in the legend. Use it for a few parts, six at most; to compare values, a bar chart reads better.

plot_class

</>

pub fn plot_class() -> css.Class

polar_class

</>

pub fn polar_class() -> css.Class

polar_svg_class

</>

pub fn polar_svg_class() -> css.Class

radar

</>

pub fn radar(
  title title: String,
  axes axes: List(String),
  series series: List(Series),
) -> Chart

Several measures, one per axis around the circle, for comparing the shape of a few series. axes name the measures; each series has one value per axis.

radar_grid_class

</>

pub fn radar_grid_class() -> css.Class

radar_label_class

</>

pub fn radar_label_class() -> css.Class

radar_shape_class

</>

pub fn radar_shape_class() -> css.Class

radial

</>

pub fn radial(
  title title: String,
  labels labels: List(String),
  values values: List(Float),
  max max: Float,
) -> Chart

Each value out of max as a ring, such as goals reached.

ring_track_class

</>

pub fn ring_track_class() -> css.Class

summary_class

</>

pub fn summary_class() -> css.Class

svg_class

</>

pub fn svg_class() -> css.Class

table_class

</>

pub fn table_class() -> css.Class

table_scroll_class

</>

pub fn table_scroll_class() -> css.Class

tick_class

</>

pub fn tick_class() -> css.Class

tip_class

</>

pub fn tip_class() -> css.Class

tip_label_class

</>

pub fn tip_label_class() -> css.Class

tip_left_class

</>

pub fn tip_left_class() -> css.Class

tip_name_class

</>

pub fn tip_name_class() -> css.Class

tip_right_class

</>

pub fn tip_right_class() -> css.Class

tip_row_class

</>

pub fn tip_row_class() -> css.Class

view

</>

pub fn view(chart: Chart) -> element.Element(msg)

words

</>

pub fn words(chart: Chart, words: words.Words) -> Chart

Speak another language: “Show data”, “Total”, shares and, unless format says otherwise, numbers. English by default.

x_label_class

</>

pub fn x_label_class() -> css.Class