Chart primitives
The shared building blocks every chart composes from.
Charts are not monolithic components. Each one composes from the same small set of primitives, which is why learning one chart teaches you all of them.
| Primitive | Role |
|---|---|
| Container | Sizing, responsiveness, and the config context |
| Axis | Ticks, labels, and value formatting |
| Grid | Background rules |
| Legend | Series keys, driven by the chart config |
| Tooltip | Hover detail |
The container carries the config
The container provides the config (the map from series key to label and colour) to everything inside it. That is why the legend and tooltip stay in sync with the chart without being passed the same props twice.
Composition means you can subtract
Because the pieces are separate elements rather than boolean props, removing the legend is deleting a line, and restyling the tooltip is editing one component rather than forking the chart.
Formatting
Axis and tooltip both take formatters. Set them together: a chart whose axis
reads 4.2k and whose tooltip reads 4200 looks broken even though both are
correct.