diff --git a/plots/altair/area/area-basic/default.py b/plots/altair/area/area-basic/default.py index a147c10cf3..e208f167d7 100644 --- a/plots/altair/area/area-basic/default.py +++ b/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) ) diff --git a/plots/highcharts/area/area-basic/default.py b/plots/highcharts/area/area-basic/default.py index d963fbca57..27eeae67c7 100644 --- a/plots/highcharts/area/area-basic/default.py +++ b/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() diff --git a/plots/matplotlib/fill_between/area-basic/default.py b/plots/matplotlib/fill_between/area-basic/default.py index 6bc7bcc5e7..4fda4b55c1 100644 --- a/plots/matplotlib/fill_between/area-basic/default.py +++ b/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="--")