Foundations
Data visualisation
A chart answers a question and always comes with a table or text equivalent. This page covers choosing a chart type, colour roles, chart anatomy, number formats, motion and accessibility.
How it works
Section titled “How it works”- Charts are drawn with ECharts (D-17). Colours, type and motion come from tokens; chart code never holds colour codes.
- When the mode changes, a chart re-reads its palette from the tokens; it switches between light and dark without a page reload. The series palette is independent of the brand: every brand has the same eight colours.
- Every chart answers a question: “How did the monthly transaction count change over the last 12 months?” The title states the question or its answer.
Choosing a chart type
Section titled “Choosing a chart type”| Question | Type | Note |
|---|---|---|
| How did it change over time? | Line | At most 5 series. Continuous time axis. |
| How do categories compare? | Horizontal or vertical bar | Bars start at zero; horizontal bars for long labels. |
| What are the parts of the whole? | Stacked bar | Pie and donut only for 2-3 parts; bars for more. |
| How is a single number doing? | Stat tile | Value, change against the previous period and an optional sparkline. |
| Are exact values needed? | Table | A chart does not show exact values. |
| Are two variables related? | Scatter | Only on analysis screens. |
Three-dimensional charts, dual-axis charts (unless both axes are clearly labelled) and speedometer gauges are not used.
Colour roles
Section titled “Colour roles”Direction
Section titled “Direction”Shows that a number went up or down. These colours show direction, not status; a sign (+, −) or arrow always comes with them.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-data-positive | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-data-negative | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
Categories
Section titled “Categories”Series take colours in a fixed order (color-chart-categorical-1…8); the same series keeps the same colour in every chart. The first five colours hold no red or green; those come only as the sixth and seventh series. Values that show a direction, such as a rise or a fall, use data-positive and data-negative, not series colours. Every series colour has at least 3:1 contrast against the surface, and no two neighbouring colours merge in the colour-blindness check. Each series has a soft partner for area and highlight fills (color-chart-soft-1…8).
| Order | Ramp step, light mode | Ramp step, dark mode |
|---|---|---|
| 1 | blue 700 | blue 400 |
| 2 | teal 500 | teal 300 |
| 3 | orange 700 | orange 500 |
| 4 | violet 500 | violet 500 |
| 5 | pink 600 | pink 400 |
| 6 | green 600 | green 500 |
| 7 | red 500 | red 300 |
| 8 | neutral 600 | neutral 400 |
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-chart-categorical-1 | #0068a5#0068a5#0068a5 | #79c2ff#79c2ff#79c2ff | |
--bigbang-color-chart-categorical-2 | #0a9f9a#0a9f9a#0a9f9a | #9edfda#9edfda#9edfda | |
--bigbang-color-chart-categorical-3 | #8a5600#8a5600#8a5600 | #c17a00#c17a00#c17a00 | |
--bigbang-color-chart-categorical-4 | #9575e2#9575e2#9575e2 | #9575e2#9575e2#9575e2 | |
--bigbang-color-chart-categorical-5 | #b34881#b34881#b34881 | #f897c6#f897c6#f897c6 | |
--bigbang-color-chart-categorical-6 | #138a50#138a50#138a50 | #2da264#2da264#2da264 | |
--bigbang-color-chart-categorical-7 | #e1595b#e1595b#e1595b | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-chart-categorical-8 | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-chart-soft-1 | #c8e5ff#c8e5ff#c8e5ff | #015182#015182#015182 | |
--bigbang-color-chart-soft-2 | #bfece8#bfece8#bfece8 | #005956#005956#005956 | |
--bigbang-color-chart-soft-3 | #fddbb4#fddbb4#fddbb4 | #6c4300#6c4300#6c4300 | |
--bigbang-color-chart-soft-4 | #e3dcff#e3dcff#e3dcff | #523e83#523e83#523e83 | |
--bigbang-color-chart-soft-5 | #ffd3e6#ffd3e6#ffd3e6 | #782f56#782f56#782f56 | |
--bigbang-color-chart-soft-6 | #c3eed1#c3eed1#c3eed1 | #0d5c34#0d5c34#0d5c34 | |
--bigbang-color-chart-soft-7 | #ffd6d4#ffd6d4#ffd6d4 | #822b2e#822b2e#822b2e | |
--bigbang-color-chart-soft-8 | #e5e5e5#e5e5e5#e5e5e5 | #262626#262626#262626 | |
--bigbang-color-chart-grid | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-chart-axis | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-chart-cursor | #f5f5f5#f5f5f5#f5f5f5 | #1e1e1e#1e1e1e#1e1e1e |
- A chart uses at most 5 category colours. More are grouped under “Other”, or the chart is split.
- Neighbouring series are told apart by line pattern, marker shape or direct label as well as colour.
Sequential and diverging
Section titled “Sequential and diverging”- A sequential scale (less → more) is light-to-dark steps of one colour family: brand 100 → brand 800.
- A diverging scale (negative ↔ positive) separates its two ends with a neutral step in the middle:
data-negative↔ neutral 200 ↔data-positive. - In a heat map, each cell’s value is also given in the tooltip or written inside the cell.
Status
Section titled “Status”When a chart shows status (successful, pending, failed), it uses the status-*-emphasis tokens from Colours and names each status in the legend.
Anatomy
Section titled “Anatomy”| Part | Rule |
|---|---|
| Title | The question the chart answers or its main finding; type-heading-sm. |
| Subtitle | Unit, period and time zone: “Count, last 12 months”. |
| Legend | Shown for 2 or more series; where possible, series are labelled directly at the end of the line. |
| Axes | Labelled; the unit in the axis title or the subtitle. Gridlines in color-chart-grid, 1 px and horizontal only; no axis line or ticks. Axis text in color-chart-axis, 12 px, with tabular figures. |
| Cursor | A color-chart-cursor band behind the category for bars, a 1 px border-default vertical rule for lines. |
| Tooltip | Opens with mouse, touch and keyboard; shows the exact value and date. |
| Data label | With few bars the value can be written directly; not when crowded. |
| Source and note | When needed, under the chart in type-body-sm. |
States
Section titled “States”| State | Display |
|---|---|
| Loading | A skeleton the size of the chart; no axes drawn. |
| No data | Empty-state text in the chart area: “No data for this period.” |
| Error | Error text in the chart area and a “Try again” action. |
| Partial data | The missing period is drawn with a dashed line and explained in a note. |
Number and date formats
Section titled “Number and date formats”- Values are formatted with
Intl.NumberFormat, amounts withnarrowSymbol. See Formatting and localisation. - Axis labels may abbreviate (1.2M); the tooltip shows the full value.
- A bar chart’s value axis starts at zero. When a line chart’s axis does not start at zero, it is clearly visible on the axis.
- Negative values are drawn below the zero line and written with a minus sign.
- The time axis uses the
Europe/Istanbultime zone; the subtitle says so. - A chart never calculates totals or fees in the front end; values arrive calculated from the server.
Motion
Section titled “Motion”A chart draws with a short transition on first load and when the data changes. With reduced motion, the chart appears in its final state at once.
| Token | Light mode | Dark mode |
|---|---|---|
--bigbang-motion-chart-enter-duration | 0.4s0.4s0.4s | 0.4s0.4s0.4s |
--bigbang-motion-chart-update-duration | 0.24s0.24s0.24s | 0.24s0.24s0.24s |
- Numbers do not count up; the new value appears directly.
- No chart spins or scrolls continuously.
Accessibility
Section titled “Accessibility”- Every chart comes with a table or text summary of the same data. The table may sit in a section opened with “Show table” (WCAG 1.1.1).
- A chart has a short text summary: “The monthly transaction count has risen since March; the highest value was in September.” This summary is the chart’s accessible description.
- Lines, bars and markers have at least 3:1 contrast against the background (WCAG 1.4.11).
- Colour never carries meaning alone: series are also told apart by pattern, marker or direct label (WCAG 1.4.1).
- The tooltip opens with the keyboard; arrow keys move between data points.
- At 320 CSS px width, a chart scrolls inside its own container or turns into a table.
Guidelines
Section titled “Guidelines”Show direction with a sign as well as colour
Section titled “Show direction with a sign as well as colour”+12.4%−3.1%
12.4%3.1%