BoxLang Charts Module

Welcome to the Charts Explorer

Explore comprehensive examples showcasing the power of BoxLang Charts

What's Included

This explorer demonstrates all chart types, styling options, advanced features, and responsive behaviors. Each example includes complete source code with syntax highlighting.

Rich Styling

✓ Custom colors
✓ Font customization
✓ Legends & titles
✓ Background colors

Flexible Layout

✓ Responsive design
✓ Custom dimensions
✓ Aspect ratios
✓ Grid line control

Advanced Options

✓ Stacked series
✓ Axis titles
✓ Multiple datasets
✓ Data labels

Performance

✓ Fast rendering
✓ Canvas-based
✓ CDN optimized
✓ Production ready

All Chart Types

A complete showcase of all 10 supported chart types with various styling options, axis configurations, and layout features.

Pie Bar Line Doughnut Radar Polar Area Area Horizontal Bar Scatter Bubble

View Examples

Enhanced Features

Advanced chart configurations showcasing enhanced features like stacked series, custom axis titles, and comprehensive styling options.

Axis Titles Grid Lines Stacked Series Font Styling Custom Markers Interactive

View Enhanced

Responsive Design

Interactive demonstrations of responsive chart behavior with different aspect ratios and container sizes. Resize your browser to see charts adapt.

Responsive Aspect Ratios Mobile-Ready Container Sizing Flexible Height

View Responsive

Query Data Sources

Use query objects directly as data sources, eliminating the need for manual chartData components. Perfect for database-driven charts.

Query Support Less Code DB-Driven Custom Columns

View Query Examples

Array Data Sources

Use arrays directly as data sources with flexible format support. Choose between array of structs or array of arrays (positional) based on your needs.

Array Support Flexible Format JSON-Ready Dynamic Data

View Array Examples

Quick Start Example

Get started with just a few lines of BoxLang code:

Simple Pie Chart

<bx:chart title="Sales Data" chartwidth="600" chartheight="300">
    <bx:chartseries type="pie" colorlist="FF6384,36A2EB,FFCE56">
        <bx:chartdata item="Q1" value="150" />
        <bx:chartdata item="Q2" value="200" />
        <bx:chartdata item="Q3" value="175" />
    </bx:chartseries>
</bx:chart>

📈 Charts Module