Chart Prompts

Restyle my chart in the "Charging Map" 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 clean mobility app screen. Rounded white cards on a pale gray canvas, a soft lime accent, friendly geometric sans type, and small functional details: a map-pin tile, plug-type chips and live status dots.

Colors (use these exact values):
- Canvas: #F2F4F5. Cards: #FFFFFF with a soft two-layer shadow (0 1px 1px and 0 6px 12px, ink at 5% and 6%).
- Lime: #A6DB4A for bars and the pin tile. Deep lime: #4E8A12 for the top-ranked bar (with white value text).
- Ink: #1D2327. Secondary text: #6A737B. Faint labels: #9AA2A9. Dividers and chip borders: #E3E7EA. Bar tracks: #EEF1F3.
- Status dots: available #3F9A2E, busy #E08A1E, offline #B4BBC2.

Typography (Google Fonts):
- Plus Jakarta Sans throughout, tabular figures for numbers. Eyebrow 700 11px uppercase 1.4px letter-spacing #6A737B; title 700 23px -0.4px letter-spacing; subtitle 500 13px; column headers 700 10.5px uppercase 1.2px letter-spacing #9AA2A9; row labels 600 14px (700 for the leader); chip text 600 10.5px; bar values 700 12px.

Layout:
- Header card (24px inset, 20px radius, 104px tall): a 44px lime rounded-square tile (radius 14) with a black map-pin glyph, then eyebrow, title and subtitle stacked; a Week/Month segmented pill switch on the right (white active segment with shadow on a #EEF1F3 track).
- Chart card below with 20px radius. Column headers across the top: STATION, SESSIONS (with gridline values beside it), FREE NOW right-aligned.
- Rows 44px tall separated by 1px #E3E7EA dividers.
- Footer inside the card: source on the left, a status-dot legend on the right.

Axes and grid:
- No axis lines. Faint dashed vertical gridlines (1px #E3E7EA, 2 on 4 off) with their values printed in the column-header row, not at the bottom.

Marks:
- Bar chart: horizontal fully rounded pill bars 18px tall on a full-width #EEF1F3 pill track, lime fill, the leader in deep lime. The value sits inside the bar end, right-aligned 10px from the tip. A plug-type chip (22px tall pill, white, 1.2px #E3E7EA border, tiny plug outline icon + label) right-aligned just left of the bars. At the far right a status dot (r 4 solid over an r 8 halo at 18% opacity) and a count like "4/6", or "Offline" in faint gray.
- Line chart: a 3px lime line (#4E8A12 where it must read on white) with round caps over a lime area fill fading from 25% to 0, inside the same rounded card; point markers as r 4 white dots with a 2px lime ring; the latest value in a small ink pill tooltip. Same dashed vertical grid and faint header labels.

Avoid: sharp corners, heavy axes, dark backgrounds, more than one accent hue for data, legends for a single series.

When you're done, render the chart and check that chips never overflow their text, values fit inside short bars (move them outside if not), every status dot has a text label beside it, and the cards' shadows are soft rather than dark.