data viz · hierarchical

TuxChartSunburst

Two-ring radial breakdown — inner ring is top-level groups, outer ring is children with stepped opacity. Use when the audience needs to feel the radial structure of a program (budget, portfolio, capacity inventory).

Sunburst is a sister to TuxTreemap. Treemap is better when comparative size of children matters (rectangles encode area, easier to read for tight ratios). Sunburst is better when the radial structure is the story. For ranked lists, prefer TuxChartBar — bars are far easier to read than any hierarchical chart. Two rings is the maximum that stays readable.

Interactive Telemetry Lab

Sunburst & Hierarchical Radial Workbench

Presets:

Capacity$880M · 42%

New mainlanes$480M

Frontage rebuild$220M

HOV / managed lanes$180M

Preservation$670M · 32%

Pavement$320M

Bridge$240M

Drainage$110M

Safety$330M · 16%

Intersection$175M

Roadside$95M

Pedestrian$60M

Operations$200M · 10%

ITS$90M

Signals$60M

Incident mgmt$50M

Properties Inspector4 configurable knobs

Telemetry Datasetdataset

Diameter Sizesize

Show Breakdown LegendshowLegend

true

Center LabelcenterLabel

Dynamic Component Syntax

<tux-chart-sunburst
  :data="programs"
/>

flagship · two-ring with legend

Program portfolio

Inner ring: the four MIP investment categories. Outer ring: each category's spend mix. Center carries the program total in display-grade tabular numerals. The right-side table lists every child with its share — so the precise number is always recoverable, not estimated off arc length.

Exhibit 12.01

MIP 2025 program portfolio · $2.08B

Capacity$880M · 42%

New mainlanes$480M

Frontage rebuild$220M

HOV / managed lanes$180M

Preservation$670M · 32%

Pavement$320M

Bridge$240M

Drainage$110M

Safety$330M · 16%

Intersection$175M

Roadside$95M

Pedestrian$60M

Operations$200M · 10%

ITS$90M

Signals$60M

Incident mgmt$50M

<tux-chart-frame
  eyebrow="Exhibit 12.01"
  title="MIP 2025 program portfolio · $2.08B"
  source="TTI Mobility Investment Priorities · 2025"
>
  <tux-chart-sunburst
    :data="programs"
    :size="320"
    center-label="Total"
    :format-total="(t) => '$' + t.toLocaleString() + 'M'"
  />
</tux-chart-frame>

bare · no legend

Tight-layout variant

For dashboard tiles or composed exhibits where the legend would crowd the surface, set :show-legend="false". Each arc carries an SVG <title> tooltip with label · value · share, so the data is still accessible — just not laid out beside the chart.

research portfolio · FY 2025

Hover any arc for the exact label, value, and share. Pair this density with a stat row beneath to call out the headline category totals — sunburst is great for "where does the money go?" but the precise totals belong on a stat row.

<div class="cs-demo__bare">
  <tux-chart-sunburst
    :data="portfolio"
    :size="240"
    :show-legend="false"
    :format-total="(t) => '$' + t + 'M'"
  />
  <div>
    <p class="eyebrow">research portfolio · FY 2025</p>
    <p>
      Hover any arc for the exact label, value, and share. Pair this density
      with a stat row beneath to call out headline category totals.
    </p>
  </div>
</div>