Chart Prompts

Restyle my chart in the "Hydrant Flow" 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 water system engineering test sheet. Clean, gridded and technical: white paper, graph paper inside a boxed plot, a ruled data box of test conditions and marks colored by the standard flow class bands, with the class code printed in each mark.

Colors (use these exact values):
- Page: #FFFFFF. Graph paper minor lines: #EDF1F6. Major lines and footer rule: #C9D0DA.
- Class bands for values: #60A5FA (light blue, highest class), #22C55E (green), #F97316 (orange), #EF4444 (red, lowest class).
- Ink: #1B2330 for the title, plot frame, requirement lines, data box, below-requirement bar outlines and class codes. Secondary text: #5B6472.

Typography (Google Fonts):
- Bitter 700 for the title (28px, ink, stating the finding as a count).
- Overpass Mono for everything else: subtitle 12.5px #5B6472; data box keys 9.5px uppercase with 0.8px letter-spacing and values 14px 600 ink; axis labels 11px; value labels 10.5px (700 for marks that fail the requirement); category IDs 10.5px zero-padded; group headers 11.5px 700 uppercase with 1px letter-spacing and a 10px muted spec line; class codes 10px 700 ink.

Layout:
- 56px side margins. Title at y 66, subtitle at y 94.
- A ruled data box at y 114, 44px tall: adjoining 1px ink cells (about 150, 120 and 170px wide) for TEST DATE, MAIN SIZE and STATIC PRESSURE, key above value. The class legend sits at its right: a small uppercase heading and four 12px squares with class code and range.
- Plot boxed with a 1px ink frame from x 104 to 904, y 196 to 462, over graph paper: vertical minor lines every 20px and horizontal lines every 100 units, with every 500 units in #C9D0DA.
- Categories grouped by zone with 26px gaps; under the axis each group gets a 1px ink rule, its name in bold caps and a spec line (requirement and static pressure).
- Footer: 1px #C9D0DA rule, a key for the requirement line and a small class-colored bar with a 2px ink outline for "Below RFF", and "Source: illustrative data" at right.

Axes and grid:
- Y labels every 500 units right-aligned outside the frame, with a small unit label ("GPM") above. Category IDs 17px below the baseline with a small "HYD" row label.

Marks:
- Bar chart: square-cornered bars about 66% of the slot, filled by the class band the value falls in, with the class code (AA, A, B, C) in ink 7px above the baseline inside the bar. Each group has its own requirement line: 1.5px ink across the group with 10px end ticks, drawn under the value labels. Every value label sits just above its own bar top (9px, or 7px for failing bars) with a 6px round-joined white halo, so where a label meets the requirement line the line breaks cleanly around the numerals instead of running through them. Bars below the requirement get a 2px ink outline and bold numerals; never box their labels or lift them off the bar.
- Line chart: a 2px ink line connecting the values with 5px square markers filled in each point's class color, the class code 12px above each marker, and the requirement as a 1.5px ink step line with end ticks. Keep the graph paper, boxed plot and data box.

Avoid: rounded corners, shadows, gradients, colors outside the four class bands, value labels boxed or crossed by requirement lines, and labels floating away from their bar tops.

When you're done, render the chart and check that every mark's color matches its class range, the failing count in the title equals the number of outlined bars, no requirement line crosses a numeral, and legend items don't run into each other.