Chart Prompts

Restyle my chart in the "Shelf Edge" 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 supermarket price-tracking page. Crisp white paper, bold black type, retail primaries, and a bright yellow shelf-edge price label along the bottom that shouts the key number like the ticket on a store shelf.

Colors (use these exact values):
- Page: #FFFFFF. Primary ink: #111111. Secondary text: #6B6B6B. Gridlines: #E4E4E4.
- Series, in order: #111111 (black), #1F4FD1 (cobalt), #D62828 (red), #16A08E (teal green). Up to four series; beyond that group the rest.
- Label strip: #FFD400 (shelf-edge yellow) with #111111 ink. The eyebrow square is #FFD400 with a 1.5px #111111 outline.

Typography (Google Fonts):
- Archivo Black for the title (30px, -0.3px letter-spacing, stating the finding) and the hero price in the strip (108px, -3px letter-spacing, with a 40px currency symbol raised about 52px as a superscript).
- Archivo for everything else: eyebrow 12px 700 uppercase with 2px letter-spacing; subtitle 15px 400 #6B6B6B with measure, unit and period; axis labels 12.5px 500 #6B6B6B; month labels 11.5px 600 uppercase with 1px letter-spacing; direct labels 13px 700 in the series color with a 12px 500 gray value line below.

Layout:
- 56px side margins. Eyebrow at y 50 (a 10px yellow square then the text), title at y 92, subtitle at y 120.
- Plot from x 76 to 760, y 158 to 420. A direct-label column starts 12px right of the plot.
- The bottom 130px (y 470 to 600) is a full-width #FFD400 strip with a 4px #111111 rule on its top edge. Left block: small uppercase label ("LOWEST PRICE THIS WEEK"), a 20px 700 product or series name, a 13.5px detail line, then the source line at 11.5px, 75% opacity. Center: the hero value right-aligned at about x 604. Right: a white panel (288 x 110) holding a barcode placeholder of black bars of 1 to 3 unit widths, the outer guard bars 6px longer, with a 13px spaced-out number under it.

Axes and grid:
- Horizontal 1px #E4E4E4 gridlines with currency labels right-aligned 10px left of the plot. No y-axis line.
- 1.5px #111111 baseline with 5px black tick marks down at each period boundary; period labels centered between ticks.

Marks:
- Line chart: stepped lines (horizontal then vertical, square miter joins), 3px stroke. At every change point a hollow dot, r 4.5, white fill, 2.5px stroke in the series color. Lines run to the right edge of the plot. Each series ends in a direct label: a 4 x 22 px color tab, then the name and "latest value +change".
- Bar chart: square-cornered bars in the same four colors, about 60% of the band, on the black baseline, each with a 13px Archivo 700 #111111 value label 8px above. The largest or latest bar's value goes into the yellow strip as the hero number.

Avoid: rounded corners, gradients, shadows, soft pastel tints, a legend box (use direct labels), and letting the hero number touch the left text block.

When you're done, render the chart and check that the hero price does not overlap the strip's left text, the step changes land on the correct periods, every series has a direct label that does not collide with another, and the stated changes match the data.