[area-basic] highcharts implementation

[github-actions]

[area-basic] highcharts Implementation

Parent Issue: #514
Spec: specs/area-basic.md
Library: highcharts
Feature Branch: plot/area-basic

---

Attempt History

Attempts will be documented below as comments.

[github-actions]

Attempt 1/3

Technical Approach

• Imports: import tempfile, import time, import urllib.request
• Config: style=margin:0;, color=#306998

Status

• PR: feat(highcharts): implement area-basic #525
• File: plots/highcharts/area/area-basic/default.py
• Workflow: 20010553285

---

[github-actions]

🧪 Test Results (PR #525)

Python:

📊 Plot Preview (Python 3.13)

highcharts (default) - UPDATE

Before	After

View version history (8 versions)

---

🤖 Generated by gen-preview workflow

[claude]

AI Review - Attempt 1/3

Quality Evaluation

Evaluator	Score	Verdict
Claude	72/100	reject

Criteria Checklist

• VQ-001: Axes labeled correctly - FAILED (X-axis category labels not visible)
• VQ-002: Visual Clarity - Grid is subtle and appropriate
• VQ-003: Elements clear - Area fill and markers clearly visible
• VQ-004: No Overlap - FAILED (X-axis labels missing entirely)
• VQ-005: Legend Present - N/A (single series, legend correctly disabled)
• VQ-006: Colorblind Safe - Blue color is colorblind friendly
• VQ-007: Image Size - 4800x2700 px as required
• VQ-008: Title - Present and centered
• CQ-001: Type hints - N/A (KISS style script, no functions)
• CQ-002: Docstring - N/A (KISS style script)
• CQ-003: Input Validation - N/A (KISS style script)
• CQ-004: Clear Error Messages - N/A (KISS style script)
• CQ-005: No Magic Numbers - Constants are appropriately defined
• CR-001: Data Accurate - Data correctly represents monthly sales trend
• CR-002: Spec Compliance - PARTIAL (missing visible x-axis categories)
• CR-003: Edge Cases - N/A (KISS style script)

Issues Found

1. VQ-001 FAILED: X-axis category labels (Jan, Feb, Mar, etc.) are not visible in the rendered output. The months should be displayed along the bottom of the chart but they are cut off or not rendering.
2. VQ-004 FAILED: The X-axis title "Month" is also not visible in the output.
3. CR-002 PARTIAL: The spec requires x values (months) to be visible on the horizontal axis, but they are missing from the rendered image.

AI Feedback for Next Attempt

The X-axis categories and title are not rendering properly. This appears to be a rendering/clipping issue. Try the following fixes:

1. Add padding/margin to ensure x-axis labels are not cut off:

   chart.options.chart = {
       ...
       "marginBottom": 150,  # Add margin for x-axis labels
       "spacingBottom": 50,
   }

2. Ensure x-axis labels are properly positioned:

   chart.options.x_axis = {
       ...
       "labels": {
           "style": {"fontSize": "32px"},
           "enabled": True,
           "y": 30,  # Offset to ensure visibility
       },
   }

3. Consider increasing the container height or adjusting the screenshot method to capture the full chart including axis labels.

Verdict: REJECTED