Chart Prompts

Restyle my chart in the "Index Hundred" 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 rich, dark editorial chart about prices. Every series starts from the same line, so the eye reads only relative change: gains glow faintly green above the heavy dashed 100 line, losses faintly red below it, and one bold white hero line tells the story.

Colors (use these exact values):
- Page: #2A1630 (aubergine plum).
- Series: #E8C872 (pale gold), #F08BA8 (rose), #7FD8B4 (mint), #8FB8E8 (pale sky) and the hero #FFFFFF (white).
- Above-100 tint: #3FBF7F at 7% opacity; below-100 tint: #E0556A at 10% opacity. The same two colors, solid, for the small "ABOVE 2015 PRICE" and "BELOW" tags.
- Main text and the 100 baseline: #F3E9F1. Secondary text: #A993AE. Gridlines: #3E2745.

Typography (Google Fonts):
- Playfair Display 700 for the title only: 30px, #F3E9F1, stating the finding.
- IBM Plex Sans Condensed for everything else: deck 16px #A993AE with the base ("index, 2015 = 100"); axis labels 13px #A993AE (the 100 label 700 in #F3E9F1); end labels 14px 600 (hero 700) in the series color, followed 8px later by the percent change at 11px 600 with 1.2px letter-spacing, like small caps; the key date box 12.5px 700 uppercase with 1.6px letter-spacing plus a 13px line of text; tags 10.5px 600 with 1.6px letter-spacing; footer 12px.

Layout:
- 56px side margins. Title baseline at y 70, deck at y 100.
- Plot from x 96 to 736 and y 140 to 508, leaving a 170px right gutter for end labels.
- Footer at y 568: source on the left, a method note on the right.

Axes and grid:
- Rebase every series to 100 at the first period. Choose a y domain that leaves room below the lowest value (here 70 to 200).
- Horizontal 1px #3E2745 gridlines at round values; the 100 line is instead a heavy 2.5px #F3E9F1 dashed rule (9 on, 6 off), drawn over the lines and extending 8px past the plot.
- The plot area above 100 is filled with the green tint and below with the red tint. No vertical gridlines; year labels 24px below the plot.

Marks:
- Line chart: straight segments with round joins. Context series 2px at 90% opacity; the hero series 4px white, drawn last. End dots (3.5px, hero 5px) at the last point, then a thin 0.8px elbow leader to the end label; spread end labels at least 20px apart.
- Bar chart: bars grow up or down from the 100 line (index minus 100), 60% of the band, square corners, in the series colors; the hero category white. Keep the dashed 100 rule and the green and red tints.

Labels and annotation:
- Where the hero line crosses 100, draw a ring (7px, 2.5px white stroke, page-colored fill) and a boxed key date next to it: a 146 x 46 px box with a 1.2px white border and page-colored fill, "MID-2020" on the first line and "Oats back above 100" on the second. Interpolate the crossing from the data.
- Mark the hero's low point with a 4px white dot and a short 12.5px label beneath it.

Avoid: a legend box, area fills under individual lines, gradients, a non-100 baseline, and letting the end labels collide.

When you're done, render the chart and check that every series starts at exactly 100, the percent changes in the end labels equal last value minus 100, the crossing box sits at the true crossing, and the dashed 100 line reads above all other lines.