@blueprint-chart/docs 2.2.2 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/manifest.json +11 -11
- package/package.json +3 -3
- package/src/charts/index.md +2 -2
- package/src/guide/data-transforms.md +2 -2
- package/src/guide/dsl-editor.md +2 -2
- package/src/guide/embed.md +1 -1
- package/src/guide/getting-started.md +1 -1
- package/src/handbook/accessibility.md +3 -3
- package/src/handbook/annotations.md +3 -3
- package/src/handbook/anti-patterns.md +8 -8
- package/src/handbook/axes.md +7 -7
- package/src/handbook/choosing.md +5 -5
- package/src/handbook/color.md +5 -5
- package/src/handbook/design-principles.md +6 -6
- package/src/handbook/effects-kit.md +5 -6
- package/src/handbook/frame-elements.md +3 -3
- package/src/handbook/index.md +15 -15
- package/src/handbook/labels.md +4 -4
- package/src/handbook/tooltips.md +4 -4
- package/src/handbook/typography.md +3 -3
- package/src/reference/api/index.md +1 -1
package/dist/manifest.json
CHANGED
|
@@ -17,63 +17,63 @@
|
|
|
17
17
|
{
|
|
18
18
|
"slug": "anti-patterns",
|
|
19
19
|
"group": "handbook",
|
|
20
|
-
"title": "Anti-
|
|
20
|
+
"title": "Anti-patterns",
|
|
21
21
|
"blurb": "> A catalog of what goes wrong: misleading practices that distort the truth, design anti-patterns that obscure the story, and the statistical integrity rules that keep charts honest.",
|
|
22
22
|
"mdPath": "handbook/anti-patterns.md"
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"slug": "axes",
|
|
26
26
|
"group": "handbook",
|
|
27
|
-
"title": "Axes &
|
|
27
|
+
"title": "Axes & gridlines",
|
|
28
28
|
"blurb": "> When zero matters, when it doesn't, how grid lines should whisper rather than shout, how to format numbers, when to use logarithmic scales, and how aspect ratio silently changes a chart's story.",
|
|
29
29
|
"mdPath": "handbook/axes.md"
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
"slug": "choosing",
|
|
33
33
|
"group": "handbook",
|
|
34
|
-
"title": "Choosing the
|
|
34
|
+
"title": "Choosing the right chart",
|
|
35
35
|
"blurb": "> Before picking a visualization type, answer three questions about goal, content, and audience. Then pick the simplest chart that answers the question. Increase complexity only when the simpler form ",
|
|
36
36
|
"mdPath": "handbook/choosing.md"
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"slug": "color",
|
|
40
40
|
"group": "handbook",
|
|
41
|
-
"title": "Color &
|
|
41
|
+
"title": "Color & palettes",
|
|
42
42
|
"blurb": "> Palette types, seven key rules, the perceptual-uniformity trap (HCL vs. HSL), ten techniques for reducing color usage, dark mode adjustments, and the components of an organizational palette system.",
|
|
43
43
|
"mdPath": "handbook/color.md"
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
46
|
"slug": "design-principles",
|
|
47
47
|
"group": "handbook",
|
|
48
|
-
"title": "Design
|
|
48
|
+
"title": "Design principles",
|
|
49
49
|
"blurb": "> The core principles behind every good chart: purposefulness, clarity, data-ink ratio, restraint, consistency, starting with grey, the power of comparisons, and the refusal to use 3D.",
|
|
50
50
|
"mdPath": "handbook/design-principles.md"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"slug": "effects-kit",
|
|
54
54
|
"group": "handbook",
|
|
55
|
-
"title": "Effects
|
|
55
|
+
"title": "Effects kit",
|
|
56
56
|
"blurb": "> The brand effects kit ported from FIG.07 of the effects kit reference: one law, the ALWAYS / NEVER rules (including the rejected variants), and how each effect maps to a real class or component in `",
|
|
57
57
|
"mdPath": "handbook/effects-kit.md"
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
"slug": "frame-elements",
|
|
61
61
|
"group": "handbook",
|
|
62
|
-
"title": "Frame
|
|
62
|
+
"title": "Frame elements",
|
|
63
63
|
"blurb": "> A well-structured chart frame has a clear information hierarchy: title, description, chart area, annotations, axis labels, note, source, and credit. Each element has a role and a style treatment tha",
|
|
64
64
|
"mdPath": "handbook/frame-elements.md"
|
|
65
65
|
},
|
|
66
66
|
{
|
|
67
67
|
"slug": "labels",
|
|
68
68
|
"group": "handbook",
|
|
69
|
-
"title": "Labels &
|
|
69
|
+
"title": "Labels & legends",
|
|
70
70
|
"blurb": "> Direct labeling beats legends wherever possible. When you must use a legend, place it where it helps. Use value labels when precision matters and the layout allows.",
|
|
71
71
|
"mdPath": "handbook/labels.md"
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
74
|
"slug": "tooltips",
|
|
75
75
|
"group": "handbook",
|
|
76
|
-
"title": "Tooltips &
|
|
76
|
+
"title": "Tooltips & interaction",
|
|
77
77
|
"blurb": "> Tooltips progressively disclose detail, they never replace critical information. Interaction must be consistent, accessible, and keyboard-reachable. Crosshairs and hover states support — not replace",
|
|
78
78
|
"mdPath": "handbook/tooltips.md"
|
|
79
79
|
},
|
|
@@ -94,14 +94,14 @@
|
|
|
94
94
|
{
|
|
95
95
|
"slug": "data-transforms",
|
|
96
96
|
"group": "guide",
|
|
97
|
-
"title": "Data
|
|
97
|
+
"title": "Data transforms",
|
|
98
98
|
"blurb": "> A composable pipeline that shapes raw tabular data into the rows the chart actually renders.",
|
|
99
99
|
"mdPath": "guide/data-transforms.md"
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
102
|
"slug": "dsl-editor",
|
|
103
103
|
"group": "guide",
|
|
104
|
-
"title": "DSL
|
|
104
|
+
"title": "DSL editor",
|
|
105
105
|
"blurb": "> The BPC source editor — CodeMirror 6, a Lezer-generated grammar, syntax highlighting tuned for prose-shaped charts, and two-way sync with the visual panels.",
|
|
106
106
|
"mdPath": "guide/dsl-editor.md"
|
|
107
107
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueprint-chart/docs",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "Public documentation for Blueprint Chart — handbook, guide, BPC DSL spec, and lib API reference.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"provenance": true
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@blueprint-chart/lib": "2.
|
|
37
|
-
"@blueprint-chart/ui": "2.
|
|
36
|
+
"@blueprint-chart/lib": "2.3.0",
|
|
37
|
+
"@blueprint-chart/ui": "2.3.0",
|
|
38
38
|
"@fontsource-variable/geist": "^5.3.0",
|
|
39
39
|
"@fontsource-variable/geist-mono": "^5.3.0",
|
|
40
40
|
"@fontsource/dm-serif-display": "^5.3.0",
|
package/src/charts/index.md
CHANGED
package/src/guide/dsl-editor.md
CHANGED
package/src/guide/embed.md
CHANGED
|
@@ -103,7 +103,7 @@ Blueprint Chart ships 50+ palettes in `packages/lib/src/charts/palettes.ts`; eac
|
|
|
103
103
|
|
|
104
104
|
## See also
|
|
105
105
|
|
|
106
|
-
- [Color &
|
|
106
|
+
- [Color & palettes](/handbook/color)
|
|
107
107
|
- [Typography](/handbook/typography)
|
|
108
|
-
- [Tooltips &
|
|
109
|
-
- [Design
|
|
108
|
+
- [Tooltips & interaction](/handbook/tooltips)
|
|
109
|
+
- [Design principles](/handbook/design-principles)
|
|
@@ -137,7 +137,7 @@ A callout adds the *why* alongside the data ("Surpassed EU in 2023") — a sente
|
|
|
137
137
|
|
|
138
138
|
## See also
|
|
139
139
|
|
|
140
|
-
- [Frame
|
|
141
|
-
- [Labels &
|
|
142
|
-
- [Design
|
|
140
|
+
- [Frame elements](/handbook/frame-elements)
|
|
141
|
+
- [Labels & legends](/handbook/labels)
|
|
142
|
+
- [Design principles](/handbook/design-principles)
|
|
143
143
|
- [BPC DSL Specification](/reference/dsl/annotations)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Anti-
|
|
2
|
+
title: Anti-patterns
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Anti-
|
|
5
|
+
# Anti-patterns
|
|
6
6
|
|
|
7
7
|
> A catalog of what goes wrong: misleading practices that distort the truth, design anti-patterns that obscure the story, and the statistical integrity rules that keep charts honest.
|
|
8
8
|
|
|
@@ -18,7 +18,7 @@ title: Anti-Patterns
|
|
|
18
18
|
| Unnormalized choropleth | Shows population density, not the intended variable | Normalize per capita / per unit |
|
|
19
19
|
| Rainbow color scales | Perceptually non-uniform; meaningless ordering | Use sequential or diverging palettes |
|
|
20
20
|
|
|
21
|
-
See [Axes &
|
|
21
|
+
See [Axes & gridlines](/handbook/axes) for the baseline rules behind the first row, and [Color & palettes](/handbook/color) for palette guidance that prevents the last two.
|
|
22
22
|
|
|
23
23
|
## Design anti-patterns
|
|
24
24
|
|
|
@@ -33,7 +33,7 @@ See [Axes & Grid Lines](/handbook/axes) for the baseline rules behind the first
|
|
|
33
33
|
| Missing context | Data without comparison has no story | Add reference lines, targets, time comparisons |
|
|
34
34
|
| Stacking many small segments | Impossible to read individual values | Group small segments; use direct comparison |
|
|
35
35
|
|
|
36
|
-
See [Labels &
|
|
36
|
+
See [Labels & legends](/handbook/labels) for direct-labeling technique and [Annotations](/handbook/annotations) for the 3–4 annotation ceiling.
|
|
37
37
|
|
|
38
38
|
## Statistical integrity
|
|
39
39
|
|
|
@@ -79,7 +79,7 @@ Every anti-pattern traces back to a design principle being violated. If a chart
|
|
|
79
79
|
|
|
80
80
|
## See also
|
|
81
81
|
|
|
82
|
-
- [Design
|
|
83
|
-
- [Choosing the
|
|
84
|
-
- [Axes &
|
|
85
|
-
- [Color &
|
|
82
|
+
- [Design principles](/handbook/design-principles)
|
|
83
|
+
- [Choosing the right chart](/handbook/choosing)
|
|
84
|
+
- [Axes & gridlines](/handbook/axes)
|
|
85
|
+
- [Color & palettes](/handbook/color)
|
package/src/handbook/axes.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Axes &
|
|
2
|
+
title: Axes & gridlines
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Axes &
|
|
5
|
+
# Axes & gridlines
|
|
6
6
|
|
|
7
7
|
> When zero matters, when it doesn't, how grid lines should whisper rather than shout, how to format numbers, when to use logarithmic scales, and how aspect ratio silently changes a chart's story.
|
|
8
8
|
|
|
@@ -17,7 +17,7 @@ title: Axes & Grid Lines
|
|
|
17
17
|
| Scatter plot | **No** | Position encodes the value |
|
|
18
18
|
|
|
19
19
|
::: warning
|
|
20
|
-
Truncating the y-axis on a bar or area chart visually exaggerates differences. This is the single most common deceptive pattern in the wild. See [Anti-
|
|
20
|
+
Truncating the y-axis on a bar or area chart visually exaggerates differences. This is the single most common deceptive pattern in the wild. See [Anti-patterns](/handbook/anti-patterns).
|
|
21
21
|
:::
|
|
22
22
|
|
|
23
23
|
## Grid lines
|
|
@@ -132,7 +132,7 @@ The vertical axis line and ticks are off; only dashed horizontal gridlines remai
|
|
|
132
132
|
|
|
133
133
|
## See also
|
|
134
134
|
|
|
135
|
-
- [Labels &
|
|
136
|
-
- [Anti-
|
|
137
|
-
- [Design
|
|
138
|
-
- [Frame
|
|
135
|
+
- [Labels & legends](/handbook/labels)
|
|
136
|
+
- [Anti-patterns](/handbook/anti-patterns)
|
|
137
|
+
- [Design principles](/handbook/design-principles)
|
|
138
|
+
- [Frame elements](/handbook/frame-elements)
|
package/src/handbook/choosing.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Choosing the
|
|
2
|
+
title: Choosing the right chart
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Choosing the
|
|
5
|
+
# Choosing the right chart
|
|
6
6
|
|
|
7
7
|
> Before picking a visualization type, answer three questions about goal, content, and audience. Then pick the simplest chart that answers the question. Increase complexity only when the simpler form cannot convey the insight.
|
|
8
8
|
|
|
@@ -114,7 +114,7 @@ Six categories summing to 100 % — the question is "how big a slice does Chrome
|
|
|
114
114
|
|
|
115
115
|
## See also
|
|
116
116
|
|
|
117
|
-
- [Design
|
|
118
|
-
- [Anti-
|
|
119
|
-
- [Frame
|
|
117
|
+
- [Design principles](/handbook/design-principles)
|
|
118
|
+
- [Anti-patterns](/handbook/anti-patterns)
|
|
119
|
+
- [Frame elements](/handbook/frame-elements)
|
|
120
120
|
- [BPC DSL Specification](/reference/dsl/)
|
package/src/handbook/color.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Color &
|
|
2
|
+
title: Color & palettes
|
|
3
3
|
bpcBrandDefault: false
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
# Color &
|
|
6
|
+
# Color & palettes
|
|
7
7
|
|
|
8
8
|
> Palette types, seven key rules, the perceptual-uniformity trap (HCL vs. HSL), ten techniques for reducing color usage, dark mode adjustments, and the components of an organizational palette system.
|
|
9
9
|
|
|
@@ -137,6 +137,6 @@ A single red hue carries semantic weight (warming) while the dashed horizontal g
|
|
|
137
137
|
## See also
|
|
138
138
|
|
|
139
139
|
- [Accessibility](/handbook/accessibility)
|
|
140
|
-
- [Design
|
|
141
|
-
- [Anti-
|
|
142
|
-
- [Axes &
|
|
140
|
+
- [Design principles](/handbook/design-principles)
|
|
141
|
+
- [Anti-patterns](/handbook/anti-patterns)
|
|
142
|
+
- [Axes & gridlines](/handbook/axes)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Design
|
|
2
|
+
title: Design principles
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Design
|
|
5
|
+
# Design principles
|
|
6
6
|
|
|
7
7
|
> The core principles behind every good chart: purposefulness, clarity, data-ink ratio, restraint, consistency, starting with grey, the power of comparisons, and the refusal to use 3D.
|
|
8
8
|
|
|
@@ -102,7 +102,7 @@ These principles drive the project's visual defaults: grey axis lines, minimal g
|
|
|
102
102
|
|
|
103
103
|
## See also
|
|
104
104
|
|
|
105
|
-
- [Color &
|
|
106
|
-
- [Anti-
|
|
107
|
-
- [Axes &
|
|
108
|
-
- [Frame
|
|
105
|
+
- [Color & palettes](/handbook/color)
|
|
106
|
+
- [Anti-patterns](/handbook/anti-patterns)
|
|
107
|
+
- [Axes & gridlines](/handbook/axes)
|
|
108
|
+
- [Frame elements](/handbook/frame-elements)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Effects
|
|
2
|
+
title: Effects kit
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Effects
|
|
5
|
+
# Effects kit
|
|
6
6
|
|
|
7
7
|
> The brand effects kit ported from FIG.07 of the effects kit reference: one law, the ALWAYS / NEVER rules (including the rejected variants), and how each effect maps to a real class or component in `@blueprint-chart/ui`.
|
|
8
8
|
|
|
@@ -33,13 +33,12 @@ Ink and light condense around a point of attention. Everything below is that sen
|
|
|
33
33
|
## Effects and their classes
|
|
34
34
|
|
|
35
35
|
- **Grid pool** (`.bc-pool`): the drafting grid revealed radially around an anchor via a mask, never full-bleed; set `--bc-pool-x` / `--bc-pool-y` to place it over the anchor.
|
|
36
|
-
- **Pen & highlighter** (`--bc-mark`, `.bc-highlight`): the one marker with two gestures, chartreuse ink on dark, a chartreuse swipe behind body ink on light.
|
|
37
36
|
- **Grain** (`StippleDefs`): the shared stipple filter defs, referenced by `filter: url(#bc-stipple-a|b|c)`; dark marketing surfaces only (the landing hero), never on charts, data, or app UI.
|
|
38
37
|
- **Particle ring** (`BcRing`): a stippled gradient stroke framing one featured element per view; inner edges stay crisp, ordinary cards keep flat hairlines instead.
|
|
39
38
|
- **Buttons** (`.btn-bc-primary`): the everyday emphasis button, chartreuse fill / navy ink (navy fill / chartreuse ink on light); its hover/focus state is the pooled `.bc-pool`, not a separate button.
|
|
40
39
|
|
|
41
40
|
## See also
|
|
42
41
|
|
|
43
|
-
- [Color &
|
|
44
|
-
- [Design
|
|
45
|
-
- [Anti-
|
|
42
|
+
- [Color & palettes](/handbook/color)
|
|
43
|
+
- [Design principles](/handbook/design-principles)
|
|
44
|
+
- [Anti-patterns](/handbook/anti-patterns)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Frame
|
|
2
|
+
title: Frame elements
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Frame
|
|
5
|
+
# Frame elements
|
|
6
6
|
|
|
7
7
|
> A well-structured chart frame has a clear information hierarchy: title, description, chart area, annotations, axis labels, note, source, and credit. Each element has a role and a style treatment that reflects its priority.
|
|
8
8
|
|
|
@@ -94,5 +94,5 @@ A declarative title carries the insight (`"…peaked at 9.1% before retreating t
|
|
|
94
94
|
|
|
95
95
|
- [Typography](/handbook/typography)
|
|
96
96
|
- [Annotations](/handbook/annotations)
|
|
97
|
-
- [Design
|
|
97
|
+
- [Design principles](/handbook/design-principles)
|
|
98
98
|
- [BPC DSL Specification](/reference/dsl/)
|
package/src/handbook/index.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Dataviz
|
|
2
|
+
title: Dataviz handbook
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Dataviz
|
|
5
|
+
# Dataviz handbook
|
|
6
6
|
|
|
7
7
|
> An opinionated field guide for designing honest, clear, and accessible charts — the editorial principles behind Blueprint Chart, distilled into a working reference.
|
|
8
8
|
|
|
@@ -27,7 +27,7 @@ Every page in this handbook orbits the same set of principles:
|
|
|
27
27
|
- **Comparisons make the story** — data in isolation has no meaning.
|
|
28
28
|
- **No 3D, ever** — tilted surfaces lie.
|
|
29
29
|
|
|
30
|
-
If you read only one page, read [Design
|
|
30
|
+
If you read only one page, read [Design principles](/handbook/design-principles). Everything else is the application of those rules to a specific surface of the chart.
|
|
31
31
|
|
|
32
32
|
## One chart that uses every principle
|
|
33
33
|
|
|
@@ -68,24 +68,24 @@ A takeaway title states the insight; a single red hue carries meaning; gridlines
|
|
|
68
68
|
|
|
69
69
|
| If you want to... | Read |
|
|
70
70
|
| --- | --- |
|
|
71
|
-
| Decide which chart fits your data | [Choosing the
|
|
72
|
-
| Internalize the foundations | [Design
|
|
73
|
-
| Avoid the most common mistakes | [Anti-
|
|
74
|
-
| Structure the chart frame | [Frame
|
|
71
|
+
| Decide which chart fits your data | [Choosing the right chart](/handbook/choosing) |
|
|
72
|
+
| Internalize the foundations | [Design principles](/handbook/design-principles) |
|
|
73
|
+
| Avoid the most common mistakes | [Anti-patterns](/handbook/anti-patterns) |
|
|
74
|
+
| Structure the chart frame | [Frame elements](/handbook/frame-elements) |
|
|
75
75
|
| Type for legibility | [Typography](/handbook/typography) |
|
|
76
|
-
| Pick safe, meaningful color | [Color &
|
|
77
|
-
| Tame axes and grids | [Axes &
|
|
78
|
-
| Label directly | [Labels &
|
|
76
|
+
| Pick safe, meaningful color | [Color & palettes](/handbook/color) |
|
|
77
|
+
| Tame axes and grids | [Axes & gridlines](/handbook/axes) |
|
|
78
|
+
| Label directly | [Labels & legends](/handbook/labels) |
|
|
79
79
|
| Tell the story with annotations | [Annotations](/handbook/annotations) |
|
|
80
|
-
| Design interaction honestly | [Tooltips &
|
|
80
|
+
| Design interaction honestly | [Tooltips & interaction](/handbook/tooltips) |
|
|
81
81
|
| Make charts accessible to everyone | [Accessibility](/handbook/accessibility) |
|
|
82
82
|
|
|
83
83
|
## How this connects to Blueprint Chart
|
|
84
84
|
|
|
85
|
-
Blueprint Chart is the tool we built to make these principles the path of least resistance: grey defaults, baseline-zero where it matters, CVD-aware palettes, direct labeling, and a frame model that mirrors the hierarchy described here. The handbook is editorial; the [Guide](/guide/getting-started), [DSL Spec](/reference/dsl/), and [API
|
|
85
|
+
Blueprint Chart is the tool we built to make these principles the path of least resistance: grey defaults, baseline-zero where it matters, CVD-aware palettes, direct labeling, and a frame model that mirrors the hierarchy described here. The handbook is editorial; the [Guide](/guide/getting-started), [DSL Spec](/reference/dsl/), and [API reference](/reference/api/) are how you put it into practice.
|
|
86
86
|
|
|
87
87
|
## See also
|
|
88
88
|
|
|
89
|
-
- [Choosing the
|
|
90
|
-
- [Design
|
|
91
|
-
- [Getting
|
|
89
|
+
- [Choosing the right chart](/handbook/choosing)
|
|
90
|
+
- [Design principles](/handbook/design-principles)
|
|
91
|
+
- [Getting started](/guide/getting-started)
|
package/src/handbook/labels.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Labels &
|
|
2
|
+
title: Labels & legends
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Labels &
|
|
5
|
+
# Labels & legends
|
|
6
6
|
|
|
7
7
|
> Direct labeling beats legends wherever possible. When you must use a legend, place it where it helps. Use value labels when precision matters and the layout allows.
|
|
8
8
|
|
|
@@ -36,7 +36,7 @@ Place labels directly on or adjacent to data elements instead of using a separat
|
|
|
36
36
|
|
|
37
37
|
## Value labels
|
|
38
38
|
|
|
39
|
-
For bar charts, value labels are **on by default** — they replace the value axis entirely, so each bar carries its number directly. The renderer uses an "auto: label if it fits" rule: when a bar or stack segment is too narrow to hold its label legibly, the label is suppressed and the value falls back to the tooltip instead. See [Axes &
|
|
39
|
+
For bar charts, value labels are **on by default** — they replace the value axis entirely, so each bar carries its number directly. The renderer uses an "auto: label if it fits" rule: when a bar or stack segment is too narrow to hold its label legibly, the label is suppressed and the value falls back to the tooltip instead. See [Axes & gridlines](/handbook/axes) for the no-value-axis default.
|
|
40
40
|
|
|
41
41
|
For other chart types:
|
|
42
42
|
|
|
@@ -109,5 +109,5 @@ A multi-series bar chart needs a legend to map the three hues to Gold / Silver /
|
|
|
109
109
|
|
|
110
110
|
- [Typography](/handbook/typography)
|
|
111
111
|
- [Annotations](/handbook/annotations)
|
|
112
|
-
- [Tooltips &
|
|
112
|
+
- [Tooltips & interaction](/handbook/tooltips)
|
|
113
113
|
- [Accessibility](/handbook/accessibility)
|
package/src/handbook/tooltips.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: Tooltips &
|
|
2
|
+
title: Tooltips & interaction
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
# Tooltips &
|
|
5
|
+
# Tooltips & interaction
|
|
6
6
|
|
|
7
7
|
> Tooltips progressively disclose detail, they never replace critical information. Interaction must be consistent, accessible, and keyboard-reachable. Crosshairs and hover states support — not replace — clear visual hierarchy.
|
|
8
8
|
|
|
@@ -94,6 +94,6 @@ The annotation carries the headline (`"Great Recession peak"`) so the chart stan
|
|
|
94
94
|
## See also
|
|
95
95
|
|
|
96
96
|
- [Accessibility](/handbook/accessibility)
|
|
97
|
-
- [Labels &
|
|
97
|
+
- [Labels & legends](/handbook/labels)
|
|
98
98
|
- [Annotations](/handbook/annotations)
|
|
99
|
-
- [Design
|
|
99
|
+
- [Design principles](/handbook/design-principles)
|
|
@@ -86,7 +86,7 @@ Title under 50 characters, description under 70, single-letter axis labels — n
|
|
|
86
86
|
|
|
87
87
|
## See also
|
|
88
88
|
|
|
89
|
-
- [Frame
|
|
90
|
-
- [Labels &
|
|
89
|
+
- [Frame elements](/handbook/frame-elements)
|
|
90
|
+
- [Labels & legends](/handbook/labels)
|
|
91
91
|
- [Accessibility](/handbook/accessibility)
|
|
92
|
-
- [Design
|
|
92
|
+
- [Design principles](/handbook/design-principles)
|