Metro Chart Samples

Every chart on this page comes from the Metro Enterprise Charts sample data. Click any part of it in the builder to see how it is set up - each one is a <em>Metro Enterprise Chart</em> block. Change a chart, or swap in your own.

The same chart can be a card, a KPI tile, a number with no chart, a spotlight, a table beside the chart...

<strong>Card - title, chart and summary in a box</strong>

<strong>Compact card - tighter, for dashboards</strong>

<strong>Outlined - a border, no shadow</strong>

<strong>KPI tile - the number, its change and a trend line</strong>

<strong>Metric - icon, number and change, no chart</strong>

<strong>Spotlight - the latest number, large, above the chart</strong>

<strong>Chart with its data table beside it</strong>

<strong>Chart only</strong>

<strong>Full width - the chart edge to edge, summary below</strong>

<strong>Chart and description side by side</strong>

<strong>Banner - a coloured band, words beside the chart</strong>

For coloured bands and pictures.

Click a bar or a slice: the chart opens the next level, with a way back. Product categories go three levels deep - categories, then a category's products, then a product's months.

Axis titles, an axis that does not start at zero, and a dashed goal line.

School (sample) in a grid - three across on a desktop, two on a tablet, one on a phone.

Operations (sample) reads its data again every minute on the open page (its category's Refresh setting), shown in tabs.

An accent, an icon, corners, a border, a width and where it sits, space around it.

These charts are <em>lazy</em>: the page opened without them, and each one's query ran only as you scrolled near it - with a different loading animation each.

<strong>Skeleton - grey shapes of a chart</strong>

<strong>Spinner</strong>

<strong>Pulse</strong>

<strong>Growing bars</strong>

<strong>Dots</strong>