Chart Prompts

Restyle my chart in the "Swing Districts" 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: an election-analysis slope chart. Quiet gray lines for everything that stayed put, a handful of thick violet lines for the places that changed, and a heavy zero line that makes crossing it the story.

Colors (use these exact values):
- Background: #F5F6F7 (pale gray) for the whole canvas.
- Highlight: #7C3AED (violet) for the flipped or otherwise highlighted items, their dots, their value figures and the big counts.
- Context lines and dots: #A3A8B0. Ink, axes and the zero line: #111827. Secondary text: #6B7280. Faint gridlines and dividers: #DDE0E4.

Typography (Google Fonts):
- Libre Franklin 800 for the title (32px, -0.6px letter-spacing, stating the finding, numbers spelled out below ten), the two column headers (18px, centered over the axes) and the big panel counts (52px violet).
- Barlow for everything else: subtitle 16px #6B7280 naming the measure and sign convention; legend 14px 600; item labels 14px, name 600 in ink with the signed value 700 in violet; small caps labels 11px 700 with 1.6px letter-spacing; panel captions 14px; source 12px.

Layout:
- A 28 x 4 px violet bar at top left, the title at y 88, subtitle at 116, legend at 150.
- Two vertical axes, 1.2px ink, at x 318 and x 642, running from y 200 to 534, with the period labels above them.
- Labels for highlighted items sit 14px outside each axis: right-aligned "Name +9" on the left, left-aligned "-7 Name" on the right. Dodge them so baselines are at least 19px apart.
- A summary panel on the right from x 790: an uppercase "FLIPS" label, then the count in each direction with a one-line caption, separated by a 1px #DDE0E4 rule.

Axes and grid:
- A 2.5px #111827 zero line running the full width from the left margin to x 760, with "COASTAL LEAD" above and "PLAINS LEAD" below it at the left edge (11px 700, 1.6px tracking, #6B7280); substitute the names of the two sides of your measure.
- 1px #DDE0E4 gridlines between the axes every 10 units; label only the outer two ("+20 pts", "-20 pts") left of the left axis. Use a true minus sign for negative values.

Marks:
- Line chart (slope): every item is a straight line between its two values. Context items 1.5px #A3A8B0 with r 2.5 dots. Highlighted items 4px violet with round caps on an 8px background-colored casing, with r 5 violet dots ringed 2px in the background color. Draw highlights last.
- Bar chart: paired horizontal bars per item (earlier value as a 1.5px #A3A8B0 outline, later value solid), with only the highlighted items filled violet and everything else #A3A8B0, all hanging off the bold zero line, labels outside the bar ends.

Avoid: coloring every line, legends that repeat what the labels say, rainbow palettes, drop shadows and a boxed plot.

When you're done, render the chart and check that highlighted labels on both sides never collide, the counts in the title and panel match the data, the zero line reads as the heaviest rule on the page, and signs on every value are right.