# Flux 2.0 — Chart Columns, stacked columns, lines, areas, two scales, ranked bars and a donut, drawn from theme roles, with a readout on hover or focus. Reference: https://flux.kaptio.com/components/chart/ Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css ## Use it when Shows a trend, a comparison or a share that a table of numbers would make someone work out. Each chart is built from lists and inline SVG rather than a library, so every mark takes a theme role and re-colours with the theme. Series take --flux-chart-1 to -4 in order, and --flux-chart-muted for the comparison, such as last year. The caption states the takeaway in words, so the chart is evidence for a sentence rather than a puzzle. ## Do not use it when Not for one figure; use a Metric. Not for exact values someone will copy or act on; use a Table, or put one beside the chart. Not for more than four series; split the chart or rank the values as bars. Not for a matrix of values across two dimensions; use a Heatmap. Not for decoration on a metric, such as a sparkline in every tile. ## Markup ### Columns, compared with last year

Bookings by month

Every month is ahead of last year. July is the peak, at 281.

### Stacked columns

Bookings by month and channel

Direct bookings are about half of every month, and July is the peak in every channel.

### Line

Occupancy

Seats sold as a share of seats offered. August peaked at 91%, five points above last year.

### Area, cumulative

Bookings on the books

The season reached 1,323 bookings by September, 109 more than last year.

### Columns and a line on two scales, with inspection

Revenue and margin

Revenue peaked in July at €438k, and margin rose with it, to 21%.

### Ranked bars

Revenue by tour, September

Golden Circle earns more than the two smallest tours together.

### Donut

Bookings by channel

Almost half of this season’s 1,322 bookings came direct.

## API - flux-chart (class): On the figure. - flux-chart__header | __title | __summary (class): The figcaption, its heading and the takeaway sentence. - flux-chart__legend | __swatch | __swatch--line | __legend-value (class): The legend list, a square or line key, and a value beside a legend name. - flux-chart__frame | __scale | __categories (class): The plot frame, its tick list (lowest first, aria-hidden) and the category labels below. - flux-chart__columns | __bars | __column | __category (class): Columns: one list item per category, holding its label and its columns. - flux-chart__lines (class): An SVG with viewBox="0 0 100 100" and preserveAspectRatio="none", holding one polyline per series, role="img" and an aria-label with the values. A polygon in it is an area: the line’s points closed down to y 100. - flux-chart__stack | __segment (class): Stacked columns: the stack in place of a column, with --flux-value as the total’s share of the scale, and one segment per series with --flux-value as its share of the stack. - flux-chart__frame--dual | __scale--end (class): A second scale at the end side of the frame, for a series in another unit. Give it the same number of ticks as the start scale. - flux-chart__targets (class): An ol over the plot with data-flux-chart-inspect and an aria-label: one li per category, tabindex="0" on the first and "-1" on the rest, each with an aria-label stating its values. - flux-chart__readout | __readout-title | __readout-values (class): Inside each target, aria-hidden: the category, then a dl of swatch, series name and value. - data-flux-chart-inspect (attribute): Binds hover, focus and the arrow keys to the targets. Requires flux-components.js. - flux-chart__rows | __label | __bar | __value (class): Ranked bars: one list item per row, with its label, bar and value. - flux-chart__donut | __ring | __track (class): The donut and its legend, the SVG ring, and the empty ring under the segments. - data-series (attribute): 1, 2, 3, 4 or muted, on every mark and swatch. - --flux-value (attribute): Inline, on a column or bar: its value as a percentage of the scale’s top tick. ## Accessibility - The summary sentence states the takeaway, so nobody has to read the shape to get the point. - Every value is available as text: hidden text in columns, visible labels on bars and in the donut legend, and the aria-label on a line chart. Scales are aria-hidden, because the values are already read. - Colour is never the only signal: series are named in the legend, ordered the same way in every group, and the comparison line is dashed. - Chart roles clear 3:1 against every layer, as WCAG 1.4.11 requires for graphics needed to understand the content. - An inspection target is announced by its aria-label, such as "Jul. Revenue: €438k, Margin: 21%". The readout repeats it visually and is aria-hidden, and the marks under it are aria-hidden too, so nothing is read twice. - The readout never holds the only copy of a value someone needs. If people will compare exact figures, put a Table beside the chart. ## Keyboard - Tab: Moves into the inspection targets, as one stop, and out again. A chart without targets is not interactive. - Arrow Right / Arrow Left: Moves to the next or previous category and shows its readout. - Home / End: Moves to the first or last category. - Escape: Hides the readout; moving again shows it. ## Tokens - --flux-chart-1 | -2 | -3 | -4 | -muted (Tier 2) - --flux-chart-gap | -plot-height | -scale-width | -headroom | -column-gap | -bar-width | -row-bar-height - --flux-chart-grid | -axis | -label | -track | -legend-gap | -swatch-size - --flux-chart-line-width | -line-dash | -donut-size | -donut-stroke - --flux-chart-area-opacity | -stack-gap | -guide - --flux-chart-readout-gap | -readout-padding-x | -readout-padding-y | -readout-bg | -readout-border | -readout-shadow ## Do - State the takeaway in the summary sentence. - Start column and bar scales at zero. - Use series colours in order, and the muted colour for the comparison. - Place a chart below the metric row at full width, as the Dashboards pattern describes. ## Do not - Do not bring in a chart library’s palette, gradients or animations. - Do not use product accents or status colours as series; a red series reads as an error. - Do not draw more than four series, or a donut with more than five segments. - Do not put two series in the same unit on two scales; one scale tells the truth about their sizes. A second scale is for a second unit, and its range must start at zero. - Do not stack a comparison series such as last year. Stacks are parts of one total. - Do not use a chart for a single number. Use a Metric.