feat: add area-basic implementation (9 libraries) (#527)

## Summary
Adds `area-basic` plot implementation.

### Libraries
- **Merged:** 9 (all libraries)
- **Not Feasible:** 0

### Links
- **Spec:** `specs/area-basic.md`
- **Parent Issue:** #514

Closes #514

---
:robot: *Auto-generated by pyplots CI*

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>

Author: 3 people

plots/altair/area/area-basic/default.py

@@ -10,20 +10,20 @@
 # Data
 data = pd.DataFrame(
     {
-        "month": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-        "sales": [100, 150, 130, 180, 200, 220, 195, 240, 260, 230, 280, 310],
+        "month": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        "sales": [120, 135, 148, 162, 175, 195, 210, 198, 185, 170, 158, 190],
     }
 )
 
 # Create chart with area and line
 chart = (
     alt.Chart(data)
-    .mark_area(opacity=0.5, color="#306998", line={"color": "#306998", "strokeWidth": 2})
+    .mark_area(opacity=0.7, color="#306998", line={"color": "#306998", "strokeWidth": 2})
     .encode(
-        x=alt.X("month:Q", title="Month", axis=alt.Axis(labelFontSize=16, titleFontSize=20)),
+        x=alt.X("month:O", title="Month", sort=None, axis=alt.Axis(labelFontSize=16, titleFontSize=20)),
         y=alt.Y("sales:Q", title="Sales", axis=alt.Axis(labelFontSize=16, titleFontSize=20)),
     )
-    .properties(width=1600, height=900, title=alt.TitleParams(text="Basic Area Chart", fontSize=20))
+    .properties(width=1600, height=900, title=alt.TitleParams(text="Monthly Sales", fontSize=20))
     .configure_view(strokeWidth=0)
     .configure_axis(grid=True, gridOpacity=0.3)
 )

plots/highcharts/area/area-basic/default.py

@@ -15,40 +15,32 @@
 from selenium.webdriver.chrome.options import Options
 
 
-# Data - Monthly sales example
-sales = [100, 150, 130, 180, 200, 220, 195, 240, 280, 310, 290, 350]
+# Data
+months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+sales = [120, 135, 148, 162, 175, 195, 210, 198, 185, 170, 158, 190]
 
-# Create chart
+# Create chart with container (required for headless export)
 chart = Chart(container="container")
 chart.options = HighchartsOptions()
 
 # Chart configuration
-chart.options.chart = {
-    "type": "area",
-    "width": 4800,
-    "height": 2700,
-    "backgroundColor": "#ffffff",
-    "style": {"fontFamily": "Arial, sans-serif"},
-}
+chart.options.chart = {"type": "area", "width": 4800, "height": 2700, "backgroundColor": "#ffffff"}
 
 # Title
-chart.options.title = {"text": "Monthly Sales Trend", "style": {"fontSize": "48px"}}
+chart.options.title = {"text": "Monthly Sales", "style": {"fontSize": "48px"}}
 
-# Axes
+# X-axis with categories
 chart.options.x_axis = {
+    "categories": months,
     "title": {"text": "Month", "style": {"fontSize": "40px"}},
-    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-    "labels": {"style": {"fontSize": "32px"}, "enabled": True},
-    "gridLineWidth": 1,
-    "gridLineColor": "rgba(0, 0, 0, 0.1)",
-    "tickmarkPlacement": "on",
+    "labels": {"style": {"fontSize": "32px"}},
 }
 
+# Y-axis
 chart.options.y_axis = {
-    "title": {"text": "Sales ($)", "style": {"fontSize": "40px"}},
+    "title": {"text": "Sales", "style": {"fontSize": "40px"}},
     "labels": {"style": {"fontSize": "32px"}},
-    "gridLineWidth": 1,
-    "gridLineColor": "rgba(0, 0, 0, 0.1)",
+    "gridLineColor": "#e0e0e0",
 }
 
 # Legend
@@ -59,13 +51,13 @@
 series.data = sales
 series.name = "Sales"
 series.color = "#306998"
-series.fill_opacity = 0.5
-series.line_width = 4
-series.marker = {"enabled": True, "radius": 6, "fillColor": "#306998", "lineWidth": 2, "lineColor": "#ffffff"}
+series.fill_opacity = 0.6
+series.line_width = 3
+series.marker = {"enabled": True, "radius": 6, "fillColor": "#306998"}
 
 chart.add_series(series)
 
-# Download Highcharts JS
+# Download Highcharts JS for inline embedding
 highcharts_url = "https://code.highcharts.com/highcharts.js"
 with urllib.request.urlopen(highcharts_url, timeout=30) as response:
     highcharts_js = response.read().decode("utf-8")
@@ -94,16 +86,12 @@
 chrome_options.add_argument("--no-sandbox")
 chrome_options.add_argument("--disable-dev-shm-usage")
 chrome_options.add_argument("--disable-gpu")
-chrome_options.add_argument("--window-size=4800,2800")
+chrome_options.add_argument("--window-size=4800,2700")
 
 driver = webdriver.Chrome(options=chrome_options)
-driver.set_window_size(4800, 2800)
 driver.get(f"file://{temp_path}")
 time.sleep(5)
-
-# Get the container element and screenshot it directly
-container = driver.find_element("id", "container")
-container.screenshot("plot.png")
+driver.save_screenshot("plot.png")
 driver.quit()
 
 Path(temp_path).unlink()

plots/matplotlib/fill_between/area-basic/default.py

@@ -30,7 +30,7 @@
 # Labels and styling
 ax.set_xlabel("Month", fontsize=20)
 ax.set_ylabel("Sales", fontsize=20)
-ax.set_title("Monthly Sales Volume", fontsize=20)
+ax.set_title("Basic Area Chart", fontsize=20)
 ax.tick_params(axis="both", labelsize=16)
 ax.grid(True, alpha=0.3, linestyle="--")