Data visualization is the frame around a chart, not a chart engine. You supply data, keyed series (label and color) and a renderer; the component measures the plot, resolves series colors from the theme (--tp-chart-1 to --tp-chart-5 by default), and draws the tooltip and legend from what your renderer reports. Use plain SVG, as above, or wrap a charting library in the same adapter.
Series records accept label, an IconDefinition in icon, opaque appearance, and optional color or theme: { light, dark } colors.
A renderer is an object with mount(plot, { inspect, legend }) that returns { update(snapshot), destroy() }. update runs on resize, data and theme changes with the current width, height, data, series, colors and interaction; destroy removes your nodes and listeners.
The initial dimensions are 320 × 200; ResizeObserver replaces them when the plot becomes measurable. Zero-sized parents retain the last nonzero dimensions. Adapter replacement and disconnect destroy the old instance; reconnect mounts a new one. Late callbacks from a destroyed instance are ignored.
Inspection
interaction sets how people inspect values: none, pointer, focus or both. Your renderer calls inspect() with the active datum and the same payload for pointer and keyboard, and the component shows it in the library Tooltip. tooltipOptions adjusts that tooltip, for example indicator: 'line', and legendOptions moves the legend to the top.
The Root composes tp-tooltip, retaining its positioning, lifecycle, Escape dismissal, and tooltip role. Inactive and empty payloads produce no content.
Formatters replace presentation, not series identity, payload ordering, or active state. Return text, Lit content, or library components; tooltip content must remain noninteractive.
Line chart
Default density
Compact density
Restart from the initial state
Show the copyable source
Every chart needs a text equivalent. description should state the takeaway, not restate the axes, and the table slot takes a tp-table with the complete dataset for people who can’t read the graphic. Without either, the component reports a tp-diagnostic. Give each mark an accessible name too, and don’t rely on color alone when series need telling apart.
Description and table
Default density
Compact density
Restart from the initial state
Show the copyable source
Keep the table in sync with data; it is the exact source for anyone using a screen reader or copying values. The plot is 16:9 by default; the data-visualization-plot-region part changes that, as here for a short bar list.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionlabellabelstring'Data visualization'The chart's accessible name.descriptiondescriptionstring''The chart's takeaway in words, shown as its caption; a chart needs it or a table.interactioninteractionVisualizationInteraction'none'How people inspect values: by pointer, by keyboard focus, both, or not at all.
Properties
PropertyTypeDefaultDescriptiondatareadonly Record<string, unknown>[][]The records the renderer draws, in order.seriesVisualizationSeriesMap{}The series by key, each with its label, icon and color; colors default to the theme's chart palette.rendererVisualizationRenderer | undefined—The chart engine: an object whose mount(plot, { inspect, legend }) returns { update(snapshot), destroy() }.tooltipOptionsVisualizationTooltipOptions{}How the tooltip presents an inspected datum, such as its indicator and formatters.legendOptionsVisualizationLegendOptions{}How the legend presents the series, such as its placement and formatter.dimensionsread-only——The plot's current width and height in pixels.scopeIdentifierread-onlystring—The chart's stable scope, which prefixes its series color properties.metadataProviderread-onlyVisualizationMetadataProvider—The series and resolved colors, for building tooltip or legend content of your own.inspectionread-onlyVisualizationInspection—The datum currently inspected, as the renderer last reported it.legendPayloadread-onlyreadonly VisualizationPayload[]—The legend entries the renderer last reported.
Events
EventTypeDescriptiontp-resizeCustomEvent<VisualizationDimensions>The plot was measured at a new size; detail holds its width and height.
Methods
MethodReturnsDescriptionsetInspection(state)voidReports the inspected datum, as the renderer's inspect callback does; the tooltip shows it.setLegend(payload)voidReports the legend entries in the engine's order, as the renderer's legend callback does.
Slots
SlotDescriptiontableA Table with the complete dataset, the text equivalent of the chart.defaultSupplementary content below the chart.
CSS parts
PartDescription::part(data-visualization)The figure that frames the chart, its legend and its caption.::part(data-visualization-plot-region)The area the renderer draws in; 16:9 unless its aspect ratio is changed.::part(data-visualization-style-scope)The wrapper that publishes the series color properties.