Segmented Bar
Parts of one whole in one bar with a legend: each segment is as wide as its share and coloured by a tone. A thin bar for cards and table rows, a tall one with the percent inside each segment.
Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).
Basic
Pass items with a key, a label, a value and a tone. The parts keep their order; hover a segment to see its label and value.
Tones
Seven tones: primary (default), secondary (the primary colour mixed into the card), success, info, warn, danger and neutral. They follow the theme, the primary colour and dark mode.
Large
size="large" draws a tall bar with the percent inside each segment and a bigger legend.
Legend
showValue, showPercent and hideEmptyInLegend choose what the legend lists; monoLabels writes codes in the monospace font. Without a legend (showLegend off) the bar itself is read by screen readers with every part.
Aside
Content projected into the bar sits at the end of the legend row: a total, a period or a link.
Value format
valueFormat formats the values in the legend and the segment titles: number (default), integer, compact, percent or your own function.
Design tokens
dt sets the tokens of one bar — the segmentedBar group of the chart tokens: heights, gaps, radii and the colour of each tone.
Pass through
pt adds classes and styles to the parts: root, track, segment, legend, legendItem, dot, label, value, percent, aside.