BoxLang Charts Module

1. Pie Chart with Axis Titles and Custom Colors

Feature: Demonstrates axis titles on pie charts with custom color palette

Source Code

<bx:chart title="JVM Memory"
         backgroundcolor="####ffffff"
         chartwidth="600" chartheight="600"
         showlegend="true"
         xaxistitle="Memory Type" yaxistitle="Memory (KB)">
    <bx:chartseries type="pie" serieslabel="JVM Memory Distribution">
        <bx:chartdata item="Free Memory (KB)" value="512" />
        <bx:chartdata item="Used Memory (KB)" value="256" />
        <bx:chartdata item="Unallocated Memory (KB)" value="128" />
    </bx:chartseries>
</bx:chart>

2. Bar Chart with Grid Lines and Series Placement

Feature: Custom grid line controls with clustered series placement

Source Code

<bx:chart format="canvas" title="Cache Performance Report" backgroundcolor="####ffffff"
         chartwidth="600" chartheight="500" showlegend="true"
         xaxistitle="Metrics" yaxistitle="Count"
         seriesplacement="cluster" showxgridlines="false" showygridlines="true">
    <bx:chartseries type="bar" serieslabel="Cache Statistics">
        <bx:chartdata item="Hits" value="150" />
        <bx:chartdata item="Misses" value="25" />
        <bx:chartdata item="Garbage Collections" value="10" />
        <bx:chartdata item="Evictions" value="5" />
    </bx:chartseries>
</bx:chart>

3. Area Chart (Time Series)

Feature: Time series data with filled area and dual gridlines

Source Code

<bx:chart format="canvas" title="Memory Usage Trend" backgroundcolor="####ffffff"
         chartwidth="600" chartheight="300"
         xaxistitle="Time" yaxistitle="Memory Usage (MB)"
         showxgridlines="true" showygridlines="true">
    <bx:chartseries type="area" colorlist="36A2EB" serieslabel="Memory Over Time">
        <bx:chartdata item="9:00 AM" value="512" />
        <bx:chartdata item="10:00 AM" value="678" />
        <bx:chartdata item="11:00 AM" value="543" />
        <bx:chartdata item="12:00 PM" value="721" />
        <bx:chartdata item="1:00 PM" value="634" />
        <bx:chartdata item="2:00 PM" value="587" />
    </bx:chartseries>
</bx:chart>

4. Horizontal Bar Chart

Feature: Horizontal orientation with custom axis titles

Source Code

<bx:chart format="canvas" title="Resource Utilization" backgroundcolor="####ffffff"
         chartwidth="600" chartheight="300"
         xaxistitle="Usage Percentage" yaxistitle="Resources">
    <bx:chartseries type="horizontalbar" colorlist="FF6384,36A2EB,FFCE56"
                    serieslabel="Current Usage">
        <bx:chartdata item="CPU" value="75" />
        <bx:chartdata item="Memory" value="60" />
        <bx:chartdata item="Disk I/O" value="45" />
        <bx:chartdata item="Network" value="30" />
    </bx:chartseries>
</bx:chart>

5. Scatter Plot

Feature: Correlation analysis with gridlines for precision reading

Source Code

<bx:chart format="canvas" title="Performance Correlation" backgroundcolor="####ffffff"
         chartwidth="600" chartheight="400"
         xaxistitle="Response Time (ms)" yaxistitle="Throughput (req/s)"
         showxgridlines="true" showygridlines="true">
    <bx:chartseries type="scatter" colorlist="9966FF" serieslabel="Performance Data">
        <bx:chartdata item="Point 1" value="120" />
        <bx:chartdata item="Point 2" value="85" />
        <bx:chartdata item="Point 3" value="200" />
        <bx:chartdata item="Point 4" value="150" />
        <bx:chartdata item="Point 5" value="95" />
        <bx:chartdata item="Point 6" value="175" />
    </bx:chartseries>
</bx:chart>

6. Stacked Bar Chart

Feature: Stacked series placement for cumulative data visualization

Source Code

<bx:chart format="canvas" title="Server Resource Usage" backgroundcolor="####ffffff"
         chartwidth="600" chartheight="350"
         xaxistitle="Servers" yaxistitle="Resource Usage (%)"
         seriesplacement="stacked" showygridlines="true">
    <bx:chartseries type="bar" colorlist="FF9F40,4BC0C0,FF6384"
                    serieslabel="Resource Distribution">
        <bx:chartdata item="Server A" value="30" />
        <bx:chartdata item="Server B" value="45" />
        <bx:chartdata item="Server C" value="25" />
        <bx:chartdata item="Server D" value="60" />
    </bx:chartseries>
</bx:chart>

7. Doughnut Chart

Feature: Multi-color doughnut with legend positioning

Source Code

<bx:chart format="canvas" title="Browser Usage Statistics" backgroundcolor="####ffffff"
         chartheight="350" chartwidth="600" showlegend="true">
    <bx:chartseries type="doughnut"
                   colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF"
                   serieslabel="Market Share">
        <bx:chartdata item="Chrome" value="65" />
        <bx:chartdata item="Firefox" value="18" />
        <bx:chartdata item="Safari" value="12" />
        <bx:chartdata item="Edge" value="4" />
        <bx:chartdata item="Others" value="1" />
    </bx:chartseries>
</bx:chart>

8. Font Styling Demo

Feature: Custom font properties (bold, italic, size) and foreground colors

Source Code

<bx:chart format="canvas" title="Font Styling Demo" backgroundcolor="####ffffff"
         chartheight="300" chartwidth="600" showlegend="true"
         fontbold="true" fontitalic="true" fontsize="14"
         foregroundcolor="####2E4057" xaxistitle="Categories" yaxistitle="Values">
    <bx:chartseries type="bar" colorlist="FF6B6B,4ECDC4,45B7D1" serieslabel="Styled Data">
        <bx:chartdata item="Item A" value="45" />
        <bx:chartdata item="Item B" value="32" />
        <bx:chartdata item="Item C" value="23" />
    </bx:chartseries>
</bx:chart>

9. Marker Control Demo

Feature: Custom marker visibility and size controls

Source Code

<bx:chart format="canvas" title="Marker Control Demo" backgroundcolor="####ffffff"
         chartheight="300" chartwidth="600" showlegend="true"
         showmarkers="true" markersize="8"
         xaxistitle="Time Points" yaxistitle="Performance">
    <bx:chartseries type="line" colorlist="E74C3C" serieslabel="Performance Trend">
        <bx:chartdata item="Week 1" value="68" />
        <bx:chartdata item="Week 2" value="74" />
        <bx:chartdata item="Week 3" value="79" />
        <bx:chartdata item="Week 4" value="83" />
        <bx:chartdata item="Week 5" value="88" />
    </bx:chartseries>
</bx:chart>

10. Scale Control Demo

Feature: Custom scale range with scalefrom and scaleto attributes

Source Code

<bx:chart format="canvas" title="Scale Control Demo" backgroundcolor="####ffffff"
         chartheight="300" chartwidth="600" showlegend="true"
         scalefrom="0" scaleto="100"
         xaxistitle="Metrics" yaxistitle="Percentage">
    <bx:chartseries type="bar" colorlist="3498DB" serieslabel="Performance Metrics">
        <bx:chartdata item="CPU Usage" value="75" />
        <bx:chartdata item="Memory Usage" value="60" />
        <bx:chartdata item="Disk Usage" value="45" />
        <bx:chartdata item="Network Usage" value="30" />
    </bx:chartseries>
</bx:chart>

11. Label Positioning Demo

Feature: Rotated category labels for long text labels

Source Code

<bx:chart format="canvas" title="Label Positioning Demo" backgroundcolor="####ffffff"
         chartheight="350" chartwidth="600" showlegend="true"
         categorylabelpositions="up_45"
         xaxistitle="Long Category Names" yaxistitle="Values">
    <bx:chartseries type="bar" colorlist="9B59B6" serieslabel="Rotated Labels">
        <bx:chartdata item="Very Long Category Name A" value="42" />
        <bx:chartdata item="Another Long Name B" value="28" />
        <bx:chartdata item="Yet Another Long Name C" value="35" />
    </bx:chartseries>
</bx:chart>

12. Display Control Demo

Feature: Toggle tooltips, labels, and borders for clean displays

Source Code

<bx:chart format="canvas" title="Display Control Demo" backgroundcolor="####ffffff"
         chartheight="300" chartwidth="600" showlegend="true"
         showtooltip="false" showxlabel="false" showborder="true"
         yaxistitle="Values">
    <bx:chartseries type="pie" colorlist="E67E22,27AE60,8E44AD" serieslabel="No Tooltips Demo">
        <bx:chartdata item="Section A" value="40" />
        <bx:chartdata item="Section B" value="35" />
        <bx:chartdata item="Section C" value="25" />
    </bx:chartseries>
</bx:chart>

13. Sorted Data Demo

Feature: Automatic alphabetical sorting of x-axis categories

Source Code

<bx:chart format="canvas" title="Sorted Data Demo" backgroundcolor="####ffffff"
         chartheight="300" chartwidth="600" showlegend="true"
         sortxaxis="true"
         xaxistitle="Sorted Categories" yaxistitle="Values">
    <bx:chartseries type="bar" colorlist="16A085" serieslabel="Alphabetically Sorted">
        <bx:chartdata item="Zebra" value="35" />
        <bx:chartdata item="Apple" value="45" />
        <bx:chartdata item="Mango" value="30" />
        <bx:chartdata item="Cherry" value="40" />
    </bx:chartseries>
</bx:chart>

14. Interactive Chart Demo

Feature: Clickable chart data points with URL navigation

Source Code

<bx:chart format="canvas" title="Interactive Chart Demo" backgroundcolor="####ffffff"
         chartheight="300" chartwidth="600" showlegend="true"
         url="https://www.boxlang.io"
         xaxistitle="Click any data point" yaxistitle="Values">
    <bx:chartseries type="doughnut" colorlist="F39C12,E74C3C,9B59B6" serieslabel="Clickable Chart">
        <bx:chartdata item="Click Me A" value="35" />
        <bx:chartdata item="Click Me B" value="40" />
        <bx:chartdata item="Click Me C" value="25" />
    </bx:chartseries>
</bx:chart>

15. Background Color Demo

Feature: Custom background and foreground color combinations

Source Code

<bx:chart format="canvas" title="Background Color Demo" backgroundcolor="####F8F9FA"
         chartheight="300" chartwidth="600" showlegend="true"
         databackgroundcolor="####E8F6F3" foregroundcolor="####1B4F72"
         xaxistitle="Items" yaxistitle="Values">
    <bx:chartseries type="area" colorlist="52C41A" serieslabel="Colored Background">
        <bx:chartdata item="Point 1" value="45" />
        <bx:chartdata item="Point 2" value="52" />
        <bx:chartdata item="Point 3" value="38" />
        <bx:chartdata item="Point 4" value="30" />
    </bx:chartseries>
</bx:chart>

16. Enhanced Performance Analysis

Feature: Combines multiple enhancements - gridlines, colors, axis titles, and custom styling

Source Code

<bx:chart format="canvas" title="Enhanced Performance Analysis" backgroundcolor="####F8F9FA"
         chartheight="400" chartwidth="600" showlegend="true"
         xaxistitle="Product Categories" yaxistitle="Performance Score"
         showxgridlines="true" showygridlines="true"
         databackgroundcolor="####E8F6F3" foregroundcolor="####1B4F72">
    <bx:chartseries type="bar" colorlist="FF6384,36A2EB,FFCE56,4BC0C0" serieslabel="Product Performance">
        <bx:chartdata item="Product A" value="85" />
        <bx:chartdata item="Product B" value="92" />
        <bx:chartdata item="Product C" value="78" />
        <bx:chartdata item="Product D" value="68" />
    </bx:chartseries>
</bx:chart>

Advanced Features Summary

This example demonstrates how multiple enhanced features can be combined to create professional, data-rich visualizations with precise control over every aspect of the chart.

17. Multi-Series with Per-Series Border Styling

Feature: Each series with distinct border styling (color, width, radius)

Source Code

<bx:chart title="Quarterly Performance Analysis"
         chartwidth="700" chartheight="400"
         xaxistitle="Quarter" yaxistitle="Amount ($K)"
         showlegend="true"
         showygridlines="true"
         backgroundcolor="####ffffff">
    <bx:chartseries type="bar"
                    colorlist="3498db"
                    serieslabel="Revenue"
                    bordercolor="####2980b9"
                    borderwidth="3"
                    borderradius="8">
        <bx:chartdata item="Q1" value="125" />
        <bx:chartdata item="Q2" value="158" />
        <bx:chartdata item="Q3" value="142" />
        <bx:chartdata item="Q4" value="189" />
    </bx:chartseries>
    <bx:chartseries type="bar"
                    colorlist="e74c3c"
                    serieslabel="Expenses"
                    bordercolor="####c0392b"
                    borderwidth="2"
                    borderradius="4">
        <bx:chartdata item="Q1" value="95" />
        <bx:chartdata item="Q2" value="102" />
        <bx:chartdata item="Q3" value="98" />
        <bx:chartdata item="Q4" value="115" />
    </bx:chartseries>
    <bx:chartseries type="bar"
                    colorlist="2ecc71"
                    serieslabel="Net Profit"
                    bordercolor="####27ae60"
                    borderwidth="4"
                    borderradius="6">
        <bx:chartdata item="Q1" value="30" />
        <bx:chartdata item="Q2" value="56" />
        <bx:chartdata item="Q3" value="44" />
        <bx:chartdata item="Q4" value="74" />
    </bx:chartseries>
</bx:chart>

Series-Level Override

Each series uses bordercolor, borderwidth, and borderradius attributes to override chart-level defaults. This allows each data series to have distinct visual emphasis.

18. Line Chart with Variable Border Widths

Feature: Different line thicknesses to emphasize primary vs secondary metrics

Source Code

<bx:chart title="Website Traffic Trends"
         chartwidth="700" chartheight="400"
         xaxistitle="Month" yaxistitle="Visits (K)"
         showlegend="true"
         showygridlines="true"
         showmarkers="true">
    <bx:chartseries type="line"
                    colorlist="e74c3c"
                    serieslabel="Total Visitors (Primary)"
                    bordercolor="####c0392b"
                    borderwidth="5">
        <bx:chartdata item="Jan" value="125" />
        <bx:chartdata item="Feb" value="142" />
        <bx:chartdata item="Mar" value="158" />
        <bx:chartdata item="Apr" value="171" />
    </bx:chartseries>
    <bx:chartseries type="line"
                    colorlist="3498db"
                    serieslabel="Returning Visitors"
                    bordercolor="####2980b9"
                    borderwidth="2">
        <bx:chartdata item="Jan" value="45" />
        <bx:chartdata item="Feb" value="52" />
        <bx:chartdata item="Mar" value="61" />
        <bx:chartdata item="Apr" value="68" />
    </bx:chartseries>
    <bx:chartseries type="line"
                    colorlist="95a5a6"
                    serieslabel="Bounce Rate Reference"
                    bordercolor="####7f8c8d"
                    borderwidth="1">
        <bx:chartdata item="Jan" value="35" />
        <bx:chartdata item="Feb" value="32" />
        <bx:chartdata item="Mar" value="28" />
        <bx:chartdata item="Apr" value="30" />
    </bx:chartseries>
</bx:chart>

Visual Hierarchy

Use varying borderwidth values (5px, 2px, 1px) to create visual hierarchy, drawing attention to the most important data series while keeping secondary metrics visible but subtle.

Enhanced Features Demonstrated

Axis titles (X and Y)
Grid line controls
Stacked series placement
Font customization (bold, italic, size)
Custom marker controls
Scale range control
Label positioning
Display toggles

Automatic data sorting
Interactive click URLs
Background colors (chart & data)
Foreground color control
Custom color palettes
Series placement (cluster/stacked)
Legend positioning
Border control (chart & series level)
Per-series border styling

Back to Test Suite