highcharts.yaml

library: highcharts
language: python
specification_id: slope-basic
created: '2025-12-23T20:45:59Z'
updated: '2026-04-30T17:37:43Z'
generated_by: claude-sonnet
workflow_run: 25177758525
issue: 981
python_version: 3.13.13
library_version: unknown
preview_url_light: https://storage.googleapis.com/anyplot-images/plots/slope-basic/python/highcharts/plot-light.png
preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/python/highcharts/plot-dark.png
preview_html_light: https://storage.googleapis.com/anyplot-images/plots/slope-basic/python/highcharts/plot-light.html
preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/python/highcharts/plot-dark.html
quality_score: 75
review:
  strengths:
  - Correct slopegraph structure with direction color-coding that creates clear before/after
    visual narrative
  - Per-endpoint data label alignment (left/right with value+name format) is idiomatic
    Highcharts and correctly implemented
  - Realistic product sales dataset with good coverage of both rising and falling
    trajectories
  - Clean KISS structure with deterministic data; explicit text sizing throughout
  weaknesses:
  - '#306998 (Python Blue) and #FFD43B (Python Yellow) are non-Okabe-Ito; must use
    #009E73 for increase and #D55E00 for decrease'
  - 'No ANYPLOT_THEME environment variable reading; background hardcoded to #ffffff;
    all chrome tokens missing; output filenames wrong (plot.png/plot.html instead
    of plot-{THEME}.png/html)'
  - Title contains pyplots.ai instead of anyplot.ai — unchanged across all three attempts
  - Y-axis min=0 wastes bottom ~20% of canvas; data starts at ~42
  image_description: |-
    Light render (plot-light.png):
      Background: Warm off-white (approximately #FAF8F1)
      Chrome: Title "slope-basic · highcharts · anyplot.ai" bold and readable; subtitle "Product Sales: Q1 vs Q4 (thousands)" readable; Y-axis "Sales (thousands)" visible; X-axis "Q1"/"Q4" labels large and bold
      Data: Teal-green lines for increasing products, orange lines for decreasing products; large circle markers (radius 16); data labels at both endpoints show product name and value
      Legibility verdict: PASS with minor label crowding on left side where products cluster in 60-120 range

    Dark render (plot-dark.png):
      Background: Dark near-black (approximately #1A1A17)
      Chrome: Title, subtitle, axis labels, data labels all appear in light-colored text (white/light gray); clearly readable against dark surface; no dark-on-dark failures observed
      Data: Colors are identical to light render — teal-green for increasing, orange for decreasing; only chrome flipped
      Legibility verdict: PASS

    NOTE: The images in plot_images/ appear to have been generated from a prior code version. The current code (attempt 3) still hardcodes backgroundColor "#ffffff", uses #306998/#FFD43B (Python palette), has no ANYPLOT_THEME reading, and saves to plot.png/plot.html. These critical issues persist from attempts 1 and 2.
  criteria_checklist:
    visual_quality:
      score: 23
      max: 30
      items:
      - id: VQ-01
        name: Text Legibility
        score: 7
        max: 8
        passed: true
        comment: 'Font sizes explicitly set: title 64px, subtitle 42px, axis labels
          36px, data labels/ticks 28px; all readable at 4800x2700 canvas'
      - id: VQ-02
        name: No Overlap
        score: 4
        max: 6
        passed: false
        comment: Left-side data labels show crowding where multiple products cluster
          in 63-120 range
      - id: VQ-03
        name: Element Visibility
        score: 5
        max: 6
        passed: true
        comment: 6px line width and radius-16 markers clearly visible; markers slightly
          oversized
      - id: VQ-04
        name: Color Accessibility
        score: 2
        max: 2
        passed: true
        comment: Direction coding uses two CVD-safe contrasted colors; increases vs
          decreases clearly distinguishable
      - id: VQ-05
        name: Layout & Canvas
        score: 3
        max: 4
        passed: true
        comment: Generous 350px left/right margins; y-axis starting at 0 with data
          >=42 wastes bottom 20% of canvas
      - id: VQ-06
        name: Axis Labels & Title
        score: 2
        max: 2
        passed: true
        comment: Y-axis Sales (thousands), x-axis Q1/Q4 time point labels; informative
          subtitle
      - id: VQ-07
        name: Palette Compliance
        score: 0
        max: 2
        passed: false
        comment: 'Code uses #306998 (Python Blue) and #FFD43B (Python Yellow), not
          Okabe-Ito; backgroundColor hardcoded to #ffffff; no ANYPLOT_THEME reading'
    design_excellence:
      score: 11
      max: 20
      items:
      - id: DE-01
        name: Aesthetic Sophistication
        score: 4
        max: 8
        passed: true
        comment: Intentional direction color-coding is a deliberate design choice;
          otherwise standard Highcharts styling
      - id: DE-02
        name: Visual Refinement
        score: 3
        max: 6
        passed: true
        comment: Legend disabled, dashed gridlines, generous margins; full chart border
          frame remains
      - id: DE-03
        name: Data Storytelling
        score: 4
        max: 6
        passed: true
        comment: Color coding by direction creates immediate visual hierarchy; rank
          changes visible through line crossings
    spec_compliance:
      score: 13
      max: 15
      items:
      - id: SC-01
        name: Plot Type
        score: 5
        max: 5
        passed: true
        comment: 'Correct slopegraph: two time points, entities as connecting lines
          emphasizing direction and magnitude'
      - id: SC-02
        name: Required Features
        score: 4
        max: 4
        passed: true
        comment: Labels at both endpoints, direction color coding, vertical axes labeled
          with Q1/Q4, 8 entities in 5-15 range
      - id: SC-03
        name: Data Mapping
        score: 3
        max: 3
        passed: true
        comment: Q1/Q4 on x-axis, sales values on y-axis, each entity connected by
          a line
      - id: SC-04
        name: Title & Legend
        score: 1
        max: 3
        passed: false
        comment: Code title has pyplots.ai instead of anyplot.ai; wrong domain persists
          through all 3 attempts; legend disabled (appropriate)
    data_quality:
      score: 14
      max: 15
      items:
      - id: DQ-01
        name: Feature Coverage
        score: 5
        max: 6
        passed: true
        comment: Eight products with mix of increases and decreases; rank changes
          visible; good slope chart coverage
      - id: DQ-02
        name: Realistic Context
        score: 5
        max: 5
        passed: true
        comment: Product sales Q1 vs Q4 is realistic neutral business scenario
      - id: DQ-03
        name: Appropriate Scale
        score: 4
        max: 4
        passed: true
        comment: Sales values 42-270 thousand plausible for product portfolio
    code_quality:
      score: 8
      max: 10
      items:
      - id: CQ-01
        name: KISS Structure
        score: 3
        max: 3
        passed: true
        comment: 'Clean linear structure: imports -> data -> chart config -> series
          loop -> HTML export -> screenshot'
      - id: CQ-02
        name: Reproducibility
        score: 2
        max: 2
        passed: true
        comment: 'Fully deterministic: hardcoded static data, no randomness'
      - id: CQ-03
        name: Clean Imports
        score: 2
        max: 2
        passed: true
        comment: All imports are used; LineSeries from series.area is a module path
          quirk but functionally works
      - id: CQ-04
        name: Code Elegance
        score: 1
        max: 2
        passed: false
        comment: Iteration for series creation is clean; but wrong domain name and
          palette values are correctness issues
      - id: CQ-05
        name: Output & API
        score: 0
        max: 1
        passed: false
        comment: Saves to plot.png/plot.html instead of plot-{THEME}.png/plot-{THEME}.html;
          no ANYPLOT_THEME env var reading
    library_mastery:
      score: 6
      max: 10
      items:
      - id: LM-01
        name: Idiomatic Usage
        score: 3
        max: 5
        passed: true
        comment: Correct use of Chart(container=container), HighchartsOptions, LineSeries;
          inline JS for headless Chrome is idiomatic; missing theme-adaptive config
          patterns
      - id: LM-02
        name: Distinctive Features
        score: 3
        max: 5
        passed: true
        comment: Per-endpoint data label customization (different align, x, format
          on each point) is Highcharts-specific and well applied
  verdict: APPROVED
impl_tags:
  dependencies:
  - selenium
  techniques:
  - html-export
  - annotations
  patterns:
  - iteration-over-groups
  dataprep: []
  styling: []