Chart Prompts

Restyle my chart in the "Crate Dividers" 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 stock page from an independent record shop. Chunky, friendly and color-coded like the plastic dividers in a crate of used LPs: bold flat colors, a heavy grotesque, and divider tabs that name each genre.

Colors (use these exact values):
- Page: #EDEAE4 (light warm gray).
- Category colors, one per bar and its tab: #2D4EA2 (cobalt, jazz), #E8702A (orange, soul), #1E8C8C (teal, blues), #7A4FA0 (purple, funk), then #4F7F2E (green) and #C23B7B (magenta) for further categories. Keep this order: it keeps neighboring bars apart for color-blind readers (teal next to magenta is not).
- A lighter tint of each color for the top segment: #9EB0DC, #F5BE98, #93CACA, #C4AEDA, #AFC99B, #E6A3C3.
- Ink: #1E1C1A for the title and baseline. Secondary text: #6A655E. Gridlines: #D2CDC4. Text on colored tabs and bars: #FFFFFF.

Typography (Google Fonts):
- Archivo Black: title 30px in ink, stating the finding; tab labels 11px uppercase with 0.8px letter-spacing in white; the value numeral inside each bar 20px white; a small shop-name chip (11px, ink fill, page-colored text, 3px radius).
- Archivo: eyebrow 12px 600 uppercase with 2.4px letter-spacing in #6A655E; subtitle 15px #6A655E with measure, unit and total; axis labels 12px; bar sub-labels 11px 600 white ("+180 new"); category slot labels 11px 600 uppercase with 2px letter-spacing ("CRATE A"); legend 12px; source 12px.

Layout:
- 48px margins. Chip and eyebrow at y 57, title at y 104, subtitle at y 132, a two-swatch legend right-aligned at y 166.
- Plot from x 104 to 912, baseline at y 494, top at y 200. Divider tabs hang in the band from y 495 to 519, crate slot labels at y 542.

Axes and grid:
- 1px #D2CDC4 horizontal gridlines at 4 round values, labels right-aligned 16px left of the plot. A 2px ink baseline. No vertical axis line.

Marks:
- Bar chart: wide square-cornered bars (about 70% of the slot, 96px at 6 bars), starting at zero, in the category color. The most recent or "new" portion sits on top as a segment in the lighter tint, separated by a 1.5px page-colored line. Under each bar a divider tab hangs from the baseline, 62 x 24 px with 5px bottom corners, in the category color, holding the category name. Never put the tab on top of the bar: anything above the bar top makes it read taller than its value. Center each tab under its bar. The total value in 20px Archivo Black sits inside the bar 26px below the tint segment, with its sub-label 16px below.
- Line chart: 4px lines in the category colors with round joins, each line ending in the same 62 x 24 px colored tab carrying the series name in white; the latest segment of each line in the lighter tint; 6px square markers at each point.

Labels and annotation:
- Legend: two 18 x 12 px swatches, each striped in three 6px bands of the first three category colors: full strength for "Earlier stock", the lighter tints for "New this week". The key must describe shade (darker vs lighter), never introduce colors that no bar uses.
- A footnote at bottom right in 12px #6A655E stating that tabs are labels only and bar height above the baseline shows the count.

Avoid: gradients, drop shadows, thin bars, rounded bar bodies, 3D, and colors outside the list.

When you're done, render the chart and check that every tab label fits inside its tab and is centered under its bar, the legend swatches match colors actually used in the bars, nothing sits above a bar top, bars start at zero, and the numbers in the title and subtitle add up.