Chart Prompts

Restyle my chart in the "Variant Classes" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a cohort overview figure from a cancer genomics report. Clinical, orderly and data dense: a fixed five-color class code, bold totals, monospaced sample IDs and a thin composition strip that doubles as the legend.

Colors (use these exact values):
- Page: #F4F5F6 (pale gray).
- Categories in stacking order: #3D6FB6 (missense blue), #A3AAB2 (synonymous gray), #C9403A (nonsense red), #7A4FA0 (frameshift purple), #E08A2E (splice orange).
- Ink: #1E242B. Secondary text: #66707B. Gridlines: #DCE0E4.

Typography (Google Fonts):
- Sintony for all prose and numbers: title 700, 27px, -0.4px letter-spacing, stating the finding; subtitle 14px #66707B with measure, count and sort order; legend labels 12.5px ink; tick labels 12px #66707B; totals 700 13px ink (15px for the standout); axis titles 700 11.5px #66707B.
- IBM Plex Mono 500, 12px, #66707B for sample IDs under the axis (600 ink for the standout sample).

Layout:
- 56px side margins. Title, subtitle, then a full-width 8px composition strip (the whole dataset split by category share) with a legend row 22px below it: 11px swatches with 2px radius, each label reading "Missense 62%", and "share of all variants" right-aligned in 11.5px #66707B.
- The plot takes the rest of the width from x 96 to x 904; the x-axis title centered under the IDs; "Source: ..." at the bottom left.

Axes and grid:
- Horizontal 1px #DCE0E4 gridlines at round steps with labels right-aligned 10px left of the plot; the y-axis title right-aligned above the top label; no vertical grid; a 1.2px ink baseline.
- Sort categories on x by total, largest first, unless the data has a natural order.

Marks:
- Bar chart: stacked columns about 60% of the slot (40px at 12 samples), square corners, each segment outlined 1px in the page color so classes read as separate blocks. Totals centered 9px above each stack. Annotate a standout column with a 26px 1px ink leader and a two-line note (700 12.5px ink headline, 12px #66707B detail such as "2.2x the next sample").
- Line chart: one 2px line per class in the class colors with 3.5px dots at every point, direct labels at the right end in 700 12px in the line color, the same composition strip and legend row on top, and samples on x in the monospaced style.

Avoid: rounded bars, gradients, shadows, a boxed legend, colors outside the five-class code, and reordering the stack between columns.

When you're done, render the chart and check that the legend percentages sum to about 100, each stack's total matches its segments, thin top segments are still visible, and sample IDs do not collide.