feat(highcharts): implement ohlc-bar

[ghost]

Implementation: ohlc-bar - python/highcharts

Implements the python/highcharts version of ohlc-bar.

File: plots/ohlc-bar/implementations/python/highcharts.py

Parent Issue: #3293

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white #FAF8F1 background — correct anyplot light surface. Title "ohlc-bar · python · highcharts · anyplot.ai" in bold dark #1A1A17 text is clearly readable at the top, spanning roughly 55% of the canvas width (appropriate for the 42-char title). X-axis label "Date" and Y-axis label "Price (USD)" are in dark ink; tick labels in muted #4A4A44 at 44px — well-proportioned and legible. Grid lines are subtle (rgba 10% opacity). 50 OHLC bars are displayed from Jun 04 to Aug 09: up-bars in #009E73 (brand green) and down-bars in #B71D27 (red), with clear vertical high-low lines and left/right horizontal ticks. Price trends upward from ~$145 in June to ~$155 in August. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black #1A1A17 background — correct anyplot dark surface. Title rendered in light #F0EFE8 text, axis labels and tick labels in #B8B7B0 — all fully legible against the dark background. Grid lines remain subtle. The OHLC bar colors are identical to the light render: the same green (#009E73) and red (#B71D27) data colors appear unchanged; only chrome (background, text, grid) flipped. No dark-on-dark failures detected anywhere. All text is readable against the dark background.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 88/100

Category	Score	Max
Visual Quality	30	30
Design Excellence	10	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	8	10
Total	88	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All sizes explicitly set (title 66px, axis labels 56px, tick labels 44px). Well-proportioned; readable in both themes.
• VQ-02: No Overlap (6/6) — No text or element overlap. X-axis step=3 keeps labels well-spaced.
• VQ-03: Element Visibility (6/6) — 50 OHLC bars at lineWidth=4 clearly visible. Horizontal ticks distinguishable.
• VQ-04: Color Accessibility (2/2) — Semantic finance exception (green=up, red=down) allowable. Positional encoding (tick direction, bar height) provides additional signal beyond color.
• VQ-05: Layout & Canvas (4/4) — Canvas exactly 3200×1800 (gate passed). Generous margins. Nothing cut off.
• VQ-06: Axis Labels & Title (2/2) — Y-axis "Price (USD)" has units; X-axis "Date" is descriptive.
• VQ-07: Palette Compliance (2/2) — UP_COLOR=#009E73 (position 1), DOWN_COLOR=#B71D27 (position 3). Semantic exception documented. Backgrounds correct. All chrome theme-adaptive.

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured library default. The semantic coloring is required by the spec, not an added design choice. No additional visual layers elevate it above a standard chart.
• DE-02: Visual Refinement (3/6) — Subtle grid and disabled Highstock chrome (rangeSelector, navigator, scrollbar) show refinement. However, the outer chart border/frame is still visible.
• DE-03: Data Storytelling (3/6) — Up/down coloring provides basic visual hierarchy. The clear upward trend from ~$145 to ~$155 is visible but not highlighted. No focal point or trend annotation to guide the viewer.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct OHLC bar chart using Highstock native ohlc series type.
• SC-02: Required Features (4/4) — All spec features present: vertical high-low lines, left open tick, right close tick, up/down color differentiation, datetime x-axis with date formatting, grid lines.
• SC-03: Data Mapping (3/3) — Datetime on x-axis, price (USD) on y-axis. All 50 data points visible.
• SC-04: Title & Legend (3/3) — Title matches exact required format. Legend correctly disabled.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Both bullish and bearish bars. Varying high-low ranges. Realistic ~52% up-day proportion.
• DQ-02: Realistic Context (5/5) — Generic stock price at $150 starting price. Trading days only (weekends skipped). Neutral, non-controversial.
• DQ-03: Appropriate Scale (4/4) — $150 start is realistic. Daily range $1–3 is realistic. 50 trading days (~2.5 months) appropriate.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear imports → data → chart options → HTML → screenshot → save. No unnecessary functions or classes.
• CQ-02: Reproducibility (2/2) — np.random.seed(42).
• CQ-03: Clean Imports (2/2) — All imports used.
• CQ-04: Code Elegance (2/2) — Clean, appropriate complexity. No fake UI elements.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html. Current Highstock API.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) — Correctly uses Highstock (not plain Highcharts) for OHLC. stockChart constructor, correct 5-element [timestamp_ms, open, high, low, close] format, Highstock UI disabled cleanly.
• LM-02: Distinctive Features (4/5) — Native ohlc series type, upColor/color in plotOptions.ohlc, OHLC-specific tooltip pointFormat (point.open/high/low/close), Unix millisecond timestamps for financial time series.

Score Caps Applied

• None — no caps triggered.

Strengths

• Perfect spec compliance: correct Highstock OHLC series with vertical high-low lines, open/close ticks, and semantic up/down coloring
• Flawless palette compliance: #009E73 (position 1) for up-bars, #B71D27 (position 3) for down-bars, with explicit semantic-exception comment
• Complete theme-adaptive chrome: all six token variables correctly applied — zero dark-on-dark or light-on-light failures in either render
• Correct Highstock selection (OHLC type lives in Highstock, not plain Highcharts) with stockChart, millisecond timestamps, and clean disabling of rangeSelector/navigator/scrollbar
• Canvas exactly 3200×1800 with PIL safety net; all four canvas-size anchors in sync

Weaknesses

• DE-01 LOW (4/8): Chart reads as a well-configured library default. Add a secondary visual layer — e.g. a simple 5-day or 10-day SMA line using the neutral palette-8 color (#1A1A1A light / #E8E8E0 dark) — to give the chart a more purposeful, publication-ready character.
• DE-02 LOW (3/6): Outer chart border/frame is still visible. Remove it via chart.plotBorderWidth: 0 (and optionally chart.plotBorderColor: 'transparent') to achieve a cleaner, borderless look consistent with the anyplot aesthetic.
• DE-03 LOW (3/6): The clear upward trend from ~$145 in June to ~$155 in August is the natural story but is not highlighted. Add a thin trend line or a net-change annotation (e.g. +$10 / +6.7% near the final bar) to create a focal point and give the viewer an immediate takeaway.

Issues Found

1. DE-01 LOW: Aesthetic sophistication is at "well-configured default" level (4/8)
   • Fix: Add a 5-day or 10-day SMA line series using chart: type: 'line' with color: '#1A1A1A' (light) / '#E8E8E0' (dark) to create a second visual layer that elevates the chart above a plain OHLC renderer.
2. DE-02 LOW: Outer Highstock chart frame reduces visual cleanliness (3/6)
   • Fix: Set chart: { plotBorderWidth: 0 } to remove the chart border and achieve a fully borderless plot area.
3. DE-03 LOW: No focal point or visual emphasis on the price trend (3/6)
   • Fix: Add a renderer.label annotation or an extra line series connecting the first open to the last close price to make the upward trend the visual hero of the chart.

AI Feedback for Next Attempt

The technical foundation is excellent — spec compliance, palette, theme adaptation, and Highstock usage are all perfect. The only gap is Design Excellence (10/20). Three targeted fixes will close the gap to ≥90: (1) Remove the chart border (plotBorderWidth: 0). (2) Add a simple N-day SMA line series (calculate from the close prices, render in the neutral palette-8 adaptive color) to add a second visual layer. (3) Add a net-change or trend annotation to turn the visible upward movement into an explicit story for the viewer. Keep everything else as-is — the palette, theme tokens, data, and code structure are all correct.

Verdict: REJECTED

[ghost]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): The chart renders on a warm off-white background (#FAF8F1). The title "ohlc-bar · python · highcharts · anyplot.ai" appears in dark ink at the top, with a subtitle "Jun–Aug 2024 · Net change: +$5.40 / +3.6%" in a softer secondary color beneath it. Y-axis label "Price (USD)" in dark ink with dollar-formatted tick labels ($141–$158) in muted ink on the left. X-axis label "Date" in dark ink with date tick labels (Jun 04 through Aug 09) in muted ink at the bottom. OHLC bars are rendered in green (#009E73) for up-bars and red (#B71D27) for down-bars, with a dashed gray SMA line overlaid. A legend in the upper right shows a filled circle for "Stock Price" and a dashed line for "5-day SMA". Subtle grid lines run both horizontally and vertically. All text is clearly readable against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): The chart renders on a warm near-black background (#1A1A17). Title, subtitle, axis labels, and tick labels all switch to light-colored text as expected — title and axis labels in near-white (#F0EFE8) and secondary text in muted light gray (#B8B7B0). The OHLC bar colors are identical to the light render: green (#009E73) up-bars and red (#B71D27) down-bars. The dashed SMA line is a lighter muted gray adapted for dark chrome. No dark-on-dark failures detected — all text is clearly visible against the near-black background. Grid lines are appropriately subtle. Data colors are identical between themes; only chrome flips. Legibility verdict: PASS.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 88/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	8	10
Total	88	100

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set; title, axis labels, ticks, and legend readable in both themes. Subtitle at 36px is on the smaller side but legible.
• VQ-02: No Overlap (6/6) — No overlapping elements; x-axis date labels spaced with step=3, no collisions.
• VQ-03: Element Visibility (6/6) — OHLC bars at lineWidth=4 are well-proportioned for 50 data points; dashed SMA line clearly distinguishable.
• VQ-04: Color Accessibility (1/2) — Red/green for up/down bars follows the explicit finance semantic exception, and bar direction provides additional visual signal. However, red-green as primary discriminator remains a CVD concern.
• VQ-05: Layout & Canvas (4/4) — Canvas at exactly 3200×1800, gate passed. Good plot area utilization with balanced margins.
• VQ-06: Axis Labels & Title (2/2) — Y-axis "Price (USD)" with units; X-axis "Date" descriptive; correct mandated title format.
• VQ-07: Palette Compliance (2/2) — Up-bars use #009E73 (position 1), down-bars use #B71D27 (position 3) via the finance semantic exception. Light background #FAF8F1, dark background #1A1A17. All chrome tokens theme-adaptive in both renders.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Thoughtful financial color coding with semantic exception correctly applied; subtitle with computed net-change stat adds polish; above "configured default" but not publication-exceptional.
• DE-02: Visual Refinement (3/6) — Clean layout with subtle grid; Highcharts default chrome is reasonably clean. Minor deduction: both horizontal and vertical gridlines are present — for an OHLC chart, y-axis-only grid is standard and cleaner.
• DE-03: Data Storytelling (4/6) — Subtitle with net change (+$5.40 / +3.6%) tells the period story clearly. 5-day SMA overlay provides trend context. Color-coded directional bars guide quick pattern reading. Good visual hierarchy.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Highstock native ohlc type with vertical high-low bars and open/close tick marks.
• SC-02: Required Features (4/4) — Vertical high-low bars, left-tick for open, right-tick for close, up/down color coding, time axis with date formatting, grid lines.
• SC-03: Data Mapping (3/3) — Date on X-axis, Price (USD) on Y-axis; all 50 trading days visible.
• SC-04: Title & Legend (3/3) — Title is exactly ohlc-bar · python · highcharts · anyplot.ai; legend labels "Stock Price" and "5-day SMA" are appropriate.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — 50 trading days with both bullish and bearish bars; dip in early July followed by rally demonstrates full range of OHLC behavior.
• DQ-02: Realistic Context (5/5) — Realistic simulated stock price scenario for Jun–Aug 2024; neutral financial domain.
• DQ-03: Appropriate Scale (4/4) — Starting price $150 with ~3.6% gain over 50 trading days; realistic daily ranges and volatility.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat structure: imports → data generation → chart options → export. No unnecessary abstractions.
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set.
• CQ-03: Clean Imports (2/2) — All imports used; no stale imports.
• CQ-04: Code Elegance (2/2) — Clean, readable code; appropriate complexity for the task.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html; current Highstock API.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) — Correctly uses Highstock's native ohlc series type (distinct from standard Highcharts); CDP viewport override + PIL canvas pinning follow library guide best practices. Bypasses highcharts_core Python bindings in favor of direct JSON, which is appropriate for Highstock but loses some Pythonic idiom points.
• LM-02: Distinctive Features (4/5) — Leverages Highstock-specific features: ohlc series type with upColor/color for directional coloring, rangeSelector/navigator/scrollbar disabled for static output, Highstock's stockChart constructor.

Score Caps Applied

• None

Strengths

• Finance semantic exception correctly applied: green (#009E73) for up-bars, red (#B71D27) for down-bars with explicit rationale in code comment.
• Informative subtitle with computed net-change statistics adds real data storytelling value.
• 5-day SMA overlay provides trend context without cluttering the OHLC display.
• Both themes render cleanly with no dark-on-dark or light-on-light failures.
• Perfect spec compliance and data quality; all 50 OHLC bars and SMA visible.
• Canvas pinning via CDP + PIL fallback prevents dimension drift.

Weaknesses

• Both horizontal and vertical gridlines enabled; for an OHLC financial chart, y-axis-only gridlines (horizontal lines only) are conventional and reduce visual noise — remove gridLineWidth: 1 from xAxis.
• Red/green up/down coloring, while semantically justified and explicitly supported, is the sole visual discriminator for CVD users; bar direction (open/close tick positions) provides secondary signal but a shape or pattern difference would improve accessibility.
• Subtitle at 36px (vs tick labels at 44px) creates a slight hierarchy anomaly where secondary chrome text is smaller than data tick labels — consider 40px for subtitle.
• Legend marker for ohlc series renders as a filled circle by default rather than an OHLC bar symbol, which can mislead readers about what the colored markers represent.

Issues Found

1. DE-02 MODERATE: Both xAxis and yAxis have gridLineWidth: 1. For OHLC charts, x-axis grid adds clutter — horizontal price-reference lines are meaningful, vertical date-reference lines are not.
   • Fix: Remove gridLineWidth from xAxis (set to 0 or omit), keep only on yAxis.

AI Feedback for Next Attempt

The implementation is strong and scores above the attempt-2 approval threshold. The main design improvement would be switching from a full x+y grid to y-only horizontal gridlines, which is the standard convention for financial OHLC charts and reduces visual clutter. Subtitle fontsize could be bumped from 36px to 40px to maintain hierarchy. These are minor refinements — the chart is publication-quality as-is.

Verdict: APPROVED