Skip to main content

visualization · native chart

TuxChartDonut

Native SVG donut for share-of-total. The empty center reads as a label slot — perfect for "X total" headlines. Slices below minSlice% fold into an "Other" wedge so the chart stays legible past six categories. Walks --chart-1..8 across slices; slice labels are colored to match the wedge they point at.

Interactive Telemetry Lab

Donut & Share-of-Total Workbench

Presets:
CSV · 4,820 (40.1%)PDF · 3,140 (26.1%)GeoJSON · 1,880 (15.7%)Parquet · 1,210 (10.1%)GeoTIFF · 740 (6.2%)Other (1) · 220 (1.8%)CSV · 40.1%PDF · 26.1%GeoJSON · 15.7%Parquet · 10.1%GeoTIFF · 6.2%Other (1) · 1.8%

Files indexed

12,010

Properties Inspector7 configurable knobs
Telemetry Datasetdataset
Donut Diametersize
Ring Thickness Ratiothickness
Color Palettepalette
SVG Pattern Hatchingpatterns
false
Outer Callout LabelssliceLabels
true
Bottom Breakdown Legendlegend
false
Dynamic Component Syntax
<tux-chart-donut
  :slices="fileTypes"
  center-label="Files indexed"
  :center-value="12010"
  :size="300"
/>

accessible · cvd texture hatching

Universal CVD & Monochrome Pattern Hatching

Pass palette="cvd" and patterns to overlay high-contrast dual-line SVG texture hatchings across slices. The bottom breakdown table swatches reflect the respective pattern and color, eliminating reliance on hue alone to identify wedge categories.

Direct · 184 (42.0%)Search · 142 (32.4%)Referral · 88 (20.1%)Social · 24 (5.5%)Direct · 42.0%Search · 32.4%Referral · 20.1%Social · 5.5%
  • Direct184 · 42.0%
  • Search142 · 32.4%
  • Referral88 · 20.1%
  • Social24 · 5.5%
<!-- Okabe-Ito CVD palette with high-contrast dual-line SVG texture hatching -->
<tux-chart-donut
  :slices="trafficSources"
  palette="cvd"
  patterns
  legend
/>

flagship · center stat

File type distribution

Pass centerLabel + centerValue for the headline-in-the-hole composition. Six slices auto-fold to "Other" past minSlice (default 3%).

CSV · 4,820 (40.1%)PDF · 3,140 (26.1%)GeoJSON · 1,880 (15.7%)Parquet · 1,210 (10.1%)GeoTIFF · 740 (6.2%)Other (1) · 220 (1.8%)CSV · 40.1%PDF · 26.1%GeoJSON · 15.7%Parquet · 10.1%GeoTIFF · 6.2%Other (1) · 1.8%

Files indexed

12,010

<tux-chart-donut
  :slices="[
    { key: 'csv',     label: 'CSV',     value: 4820 },
    { key: 'pdf',     label: 'PDF',     value: 3140 },
    { key: 'geojson', label: 'GeoJSON', value: 1880 },
  ]"
  center-label="Files indexed"
  :center-value="9840"
/>

with legend · compact tile

Traffic by source

Turn on legend when outside slice labels would be cramped (dashboard tiles, small surfaces). Legend rows show absolute value + percent.

Direct · 184 (42.0%)Search · 142 (32.4%)Referral · 88 (20.1%)Social · 24 (5.5%)
  • Direct184 · 42.0%
  • Search142 · 32.4%
  • Referral88 · 20.1%
  • Social24 · 5.5%
<tux-chart-donut :slices="trafficSources" legend />

wrapped · editorial frame

Inside a TuxChartFrame

Exhibit 12.04

File type distribution

Corpus composition by extension; Q2 2026

CSV · 4,820 (40.1%)PDF · 3,140 (26.1%)GeoJSON · 1,880 (15.7%)Parquet · 1,210 (10.1%)GeoTIFF · 740 (6.2%)Other (1) · 220 (1.8%)CSV · 40.1%PDF · 26.1%GeoJSON · 15.7%Parquet · 10.1%GeoTIFF · 6.2%Other (1) · 1.8%

Total

12,010

Source: TTI Corridor corpus, 2026-Q2

<tux-chart-frame
  eyebrow="Exhibit 12.04"
  title="File type distribution"
  source="Source: TTI Corridor corpus, 2026-Q2"
>
  <tux-chart-donut :slices="fileTypes" center-label="Total" :center-value="totalFiles" />
</tux-chart-frame>