Chart Prompts

Restyle my chart in the "Recyclable Share" 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 packaging sustainability report from a consumer brand. Calm, factual and a little warm: soft white paper, earthy forest green and straw, clear percentages and a visible goal.

Colors (use these exact values):
- Background: #FAFAF7. Primary text: #1F2A22. Secondary text: #6D746E.
- Segments in this order: recyclable #2F6B3F (forest green), compostable #D9B45A (straw), landfill #6E6E69 (warm gray).
- Target band: #DDEBDC (pale green); the goal line and recycling-code symbols use #2F6B3F.

Typography (Google Fonts):
- Rubik throughout. Title 600, 25px, #1F2A22, -0.2px letter-spacing, sentence case, stating the finding. Subtitle 14px 400 #6D746E (measure, unit, period). Legend 13px 500. Row labels 15px, 400 normally and 600 for rows that already meet the goal. Segment labels 13px 500: white on green and gray, #3A2F10 on straw. Goal label 11px 600 uppercase with 1px letter-spacing in #2F6B3F. Axis labels and footer 11px #6D746E.

Layout:
- 56px margins. Title baseline at 60, subtitle at 88, legend at y 112 to 126 (14px squares with 3px radius, labels 21px right).
- Row labels right-aligned ending at x 192; bars from x 206 to 790; 32px bars on a 54px row pitch starting at y 160.
- Right of each bar, at x 820, a recycling-code triangle (three chasing arrows forming a triangle, about 28px wide, 2px green strokes with small filled arrowheads, the code number centered inside in Rubik 700 11px, 9px for two digits) followed by the material abbreviation (PP, PET, OTHER) in 12px 500 #6D746E.
- Footer at y 580: "Source: ..." left and "Triangle shows the main material's recycling code" right.

Axes and grid:
- No gridlines and no axis line. Percent labels 0%, 25%, 50%, 75%, 100% centered under the bar area.
- The goal is a pale green #DDEBDC column behind the bars covering the passing zone (here 85% to 100%), extending 16px above the first bar, with a 1.5px dashed #2F6B3F line at its edge (dash 4 3) drawn behind the bars so it shows in the gaps between rows, and a label "2030 GOAL: ..." right-aligned above it joined by a 1px green tick.

Marks:
- Bar chart: 100% stacked horizontal bars, square corners, with 2px background-colored separators between segments. Percentages print centered inside every segment. Sort rows by the landfill share, lowest first.
- Line chart: three lines (recyclable, compostable, landfill share) in the same colors, 2.5px, straight segments, with a 5px dot at every point and direct labels at the right end; the goal is a horizontal pale green band with the same dashed green edge, and a recycling-code triangle marks the last point of the recyclable line.

Avoid: bright neon greens, gradients, shadows, rounded bar ends, a gridded background, and legends that repeat what direct labels already say.

When you're done, render the chart and check that each row sums to 100%, every segment label fits inside its segment, the goal line never crosses a printed number, and the title's count matches the rows that meet the goal.