# Charts > πŸ“Š A comprehensive charting module for BoxLang that brings beautiful, interactive charts to your web applications This module provides powerful chart generation capabilities to the [BoxLang](https://boxlang.io) language, making it easy to create stunning data visualizations with minimal code. ## ✨ Features * 🎨 **10 Chart Types**: pie, bar, line, doughnut, radar, polar area, area, horizontal bar, scatter, and bubble charts * πŸ“± **Responsive Design**: Charts automatically adapt to container sizes and screen dimensions * 🎯 **Easy to Use**: Simple BoxLang component syntax with nested data structure * 🎭 **Highly Customizable**: Extensive styling options including colors, fonts, axes, and grid lines * ⚑ **Powered by Chart.js**: Built on the popular Chart.js library for modern, interactive charts * πŸ“Š **Advanced Features**: Stacked/clustered series, axis titles, custom scales, and tooltips * πŸ”§ **Zero Configuration**: Sensible defaults get you started quickly * πŸ’ͺ **Production Ready**: Built by Ortus Solutions with enterprise-grade quality ## πŸ“¦ Installation ### Requirements * BoxLang 1.0.0 or higher * Web support enabled (for `htmlHead()` BIF) ```bash install-bx-module bx-charts ``` ### Install via CommandBox ```bash box install bx-charts ``` The module will automatically register and be available as `bxcharts` in your BoxLang applications. ### 🚧 Rewrites CAUTION If you are using a URL rewriting mechanism (like `.htaccess` for Apache or URL rewrite rules in Nginx), ensure that requests to static assets (like JavaScript and CSS files) are properly routed to the `boxlang_modules/bx-charts/assets/` directory. This is crucial for the Chart.js library and any other assets to load correctly. Also, make sure you are not rewriting the following directory from which assets are delivered from the module:\` ``` /bxModules/bxCharts/public/index.bxm ``` The following must passthrough with no rewrites. ### Local Development Setup For local development and testing of the module itself: ```bash # Clone the repository git clone https://github.com/ortus-boxlang/bx-charts.git cd bx-charts # Set up local development environment ./setup.sh # Install dependencies box install npm install # Start the server for testing box start ``` This creates a symbolic link in `boxlang_modules/bx-charts` for local module development and testing. ## πŸš€ Quick Start Here's how to create your first chart in just a few lines: ```xml ``` That's it! πŸŽ‰ You now have a beautiful, interactive pie chart. ## πŸ“Š Chart Types The module supports 10 different chart types, each optimized for specific data visualization needs: ### πŸ₯§ Pie Chart (`type="pie"`) Perfect for showing proportions and percentages of a whole. * **Best for**: Market share, budget allocation, survey results * **Data structure**: Single series with multiple data points ### πŸ“Š Bar Chart (`type="bar"`) Great for comparing values across categories. * **Best for**: Comparing quantities, showing rankings, temporal data * **Features**: Supports stacking and clustering * **Data structure**: Single or multiple series ### πŸ“ˆ Line Chart (`type="line"`) Ideal for showing trends over time. * **Best for**: Time series, trend analysis, continuous data * **Features**: Multiple series support, customizable markers * **Data structure**: One or more series with sequential data points ### 🍩 Doughnut Chart (`type="doughnut"`) Similar to pie charts but with a hole in the center. * **Best for**: Proportions with emphasis on total value * **Visual style**: Modern, clean look with central focus area ### πŸ•ΈοΈ Radar Chart (`type="radar"`) Shows multivariate data on a circular grid. * **Best for**: Comparing multiple variables, skill assessments, product comparisons * **Data structure**: Multiple data points forming a polygon ### 🎯 Polar Area Chart (`type="polarArea"`) Like a pie chart but with varying radius. * **Best for**: Showing proportions where magnitude matters * **Visual style**: Circular sectors with different radii ### πŸ”οΈ Area Chart (`type="area"`) Line chart with filled area underneath. * **Best for**: Showing volume over time, cumulative data * **Features**: Emphasizes magnitude of change ### ↔️ Horizontal Bar Chart (`type="horizontalbar"`) Bar chart with horizontal orientation. * **Best for**: Long category names, rankings, comparisons * **Layout**: Left-to-right instead of bottom-to-top ### πŸ”΅ Scatter Plot (`type="scatter"`) Shows relationship between two variables. * **Best for**: Correlation analysis, distribution patterns * **Data structure**: X-Y coordinate pairs ### 🫧 Bubble Chart (`type="bubble"`) Shows three-dimensional data using x, y coordinates and bubble size. * **Best for**: Multi-dimensional data analysis, comparative metrics, portfolio analysis * **Data structure**: X-Y coordinate pairs with radius (r) for bubble size * **Usage**: Use `x`, `y`, and `r` attributes in `` instead of just `value` ## 🎯 Choosing the Right Chart Type Selecting the appropriate chart type is crucial for effective data visualization. Use this guide to choose the best chart for your data: ### πŸ“Š Quick Selection Guide | **Your Goal** | **Recommended Chart Type** | **Why** | | -------------------------------- | ----------------------------- | ------------------------------------------------------------------ | | Show parts of a whole | **Pie** or **Doughnut** | Best for displaying percentage distribution of 3-6 categories | | Compare values across categories | **Bar** or **Horizontal Bar** | Clear visual comparison of discrete values | | Show trends over time | **Line** or **Area** | Excellent for time series and continuous data | | Compare multiple variables | **Radar** | Perfect for multi-dimensional comparisons (e.g., product features) | | Show proportions with magnitude | **Polar Area** | Like pie chart but size indicates importance | | Display correlation | **Scatter** | Shows relationship between two variables | | Show 3D relationships | **Bubble** | Displays three metrics simultaneously (x, y, size) | | Compare with long labels | **Horizontal Bar** | Better readability for lengthy category names | | Emphasize volume/magnitude | **Area** | Highlights total quantity over time | ### πŸ’‘ Decision Tree ``` What do you want to visualize? β”œβ”€ Parts of a whole (percentages)? β”‚ β”œβ”€ Simple distribution β†’ Pie Chart πŸ₯§ β”‚ └─ Modern look with center space β†’ Doughnut Chart 🍩 β”‚ β”œβ”€ Comparing values? β”‚ β”œβ”€ Short category names β†’ Bar Chart πŸ“Š β”‚ β”œβ”€ Long category names β†’ Horizontal Bar Chart ↔️ β”‚ └─ Multiple variables per item β†’ Radar Chart πŸ•ΈοΈ β”‚ β”œβ”€ Changes over time? β”‚ β”œβ”€ Single or few metrics β†’ Line Chart πŸ“ˆ β”‚ └─ Emphasize volume/total β†’ Area Chart πŸ”οΈ β”‚ β”œβ”€ Relationships between variables? β”‚ β”œβ”€ Two variables (x, y) β†’ Scatter Plot πŸ”΅ β”‚ └─ Three variables (x, y, size) β†’ Bubble Chart 🫧 β”‚ └─ Proportions with varying magnitude? └─ Polar Area Chart 🎯 ``` ### ⚠️ Common Pitfalls to Avoid | **Don't Use** | **When** | **Use Instead** | | ------------- | ------------------------------ | --------------------- | | Pie Chart | More than 6 categories | Bar Chart | | Line Chart | Comparing unrelated categories | Bar Chart | | 3D Effects | Accuracy is important | 2D charts (all types) | | Radar Chart | Categories aren't comparable | Bar or Column Chart | | Bubble Chart | Only 2 dimensions of data | Scatter Plot | ### πŸ“ Best Practices 1. **Pie/Doughnut Charts**: Limit to 5-6 slices maximum. Order slices by size for better readability. 2. **Bar Charts**: Always start the Y-axis at zero to avoid misleading visualizations. 3. **Line Charts**: Use for continuous data only. Avoid for unrelated categories. 4. **Radar Charts**: Ensure all axes use the same scale and are comparable metrics. 5. **Bubble Charts**: Make sure bubble sizes are clearly distinguishable. Use radius (r) values that create visible differences. 6. **Color Selection**: Use consistent color schemes. Avoid red/green combinations (color blindness). ## πŸ“š Components Reference ### πŸ“Š `` Component The main container component that renders charts using Chart.js. #### Core Attributes | Attribute | Type | Default | Description | | ----------------- | ------- | --------- | -------------------------------------- | | `title` | string | "" | Chart title displayed at the top | | `chartWidth` | number | 400 | Chart width in pixels | | `chartHeight` | number | 300 | Chart height in pixels | | `backgroundColor` | string | "#ffffff" | Background color (hex or named color) | | `showLegend` | boolean | true | Display legend for multi-series charts | #### πŸ“± Responsive Attributes | Attribute | Type | Default | Description | | --------------------- | ------- | ------- | --------------------------- | | `responsive` | boolean | true | Enable responsive resizing | | `maintainAspectRatio` | boolean | true | Maintain width/height ratio | | `aspectRatio` | number | 2 | Aspect ratio (width/height) | | `resizeDelay` | number | 0 | Delay before resize (ms) | #### 🎨 Styling Attributes | Attribute | Type | Default | Description | | --------------------- | ------- | --------- | -------------------------- | | `font` | string | - | Font family for chart text | | `fontBold` | boolean | false | Bold text | | `fontItalic` | boolean | false | Italic text | | `fontSize` | number | 12 | Font size in pixels | | `foregroundColor` | string | "#333333" | Text color | | `dataBackgroundColor` | string | - | Data area background color | #### πŸ“ Axis Configuration | Attribute | Type | Default | Description | | ---------------- | ------- | ------- | -------------------------- | | `xAxisTitle` | string | "" | X-axis title | | `yAxisTitle` | string | "" | Y-axis title | | `showXGridlines` | boolean | false | Show X-axis grid lines | | `showYGridlines` | boolean | true | Show Y-axis grid lines | | `showXLabel` | boolean | true | Display X-axis labels | | `scaleFrom` | number | - | Y-axis minimum value | | `scaleTo` | number | - | Y-axis maximum value | | `sortXAxis` | boolean | false | Sort labels alphabetically | #### 🎯 Display Options | Attribute | Type | Default | Description | | ------------- | ------- | ------- | ------------------------------- | | `showBorder` | boolean | false | Display chart border | | `showMarkers` | boolean | true | Show data point markers | | `showTooltip` | boolean | true | Enable tooltips | | `markerSize` | number | 4 | Marker size in pixels | | `show3D` | boolean | false | 3D appearance (limited support) | #### πŸ“ Advanced Options | Attribute | Type | Default | Description | | ------------------------ | ------ | ------------ | ------------------------------------------------------------------------------------ | | `seriesPlacement` | string | "default" | Series layout: "default", "cluster", "stacked" | | `labelFormat` | string | "" | Y-axis label format (use `{value}` placeholder) | | `categoryLabelPositions` | string | "horizontal" | Label rotation: "horizontal", "up\_45", "up\_90", "down\_45", "down\_90", "vertical" | | `url` | string | "" | URL to open when clicking data points | ### πŸ“ˆ `` Component Defines a data series within a chart. Must be nested inside ``. #### Attributes | Attribute | Type | Required | Description | | ------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------ | | `type` | string | βœ… Yes | Chart type: "pie", "bar", "line", "doughnut", "radar", "polarArea", "area", "horizontalbar", "scatter" | | `colorlist` | string | No | Comma-separated color list (hex or named colors) | | `serieslabel` | string | No | Label for this data series | **Example:** ```boxlang ``` ### πŸ“ `` Component Defines individual data points within a series. Must be nested inside ``. #### Attributes | Attribute | Type | Required | Description | | --------- | ------ | --------- | --------------------------------------------------------------- | | `item` | string | βœ… Yes | Data point label/name | | `value` | number | βœ… Yes\* | Data point value (\*Required for all chart types except bubble) | | `x` | number | ⚠️ Bubble | X-coordinate (required for bubble charts) | | `y` | number | ⚠️ Bubble | Y-coordinate (required for bubble charts) | | `r` | number | ⚠️ Bubble | Bubble radius (required for bubble charts) | **Standard Example:** ```boxlang ``` **Bubble Chart Example:** ```boxlang ``` ## πŸ’‘ Examples ### Basic Examples #### πŸ₯§ Simple Pie Chart ```xml ``` **πŸ’‘ Use Case:** Perfect for showing how a total is divided into parts, like disk space usage or budget allocation. #### πŸ“Š Bar Chart with Grid Lines ```xml ``` **πŸ’‘ Use Case:** Great for comparing different categories or metrics at a glance. #### πŸ“ˆ Line Chart for Time Series ```xml ``` **πŸ’‘ Use Case:** Ideal for displaying trends and patterns over time. #### 🍩 Doughnut Chart ```xml ``` **πŸ’‘ Use Case:** Similar to pie charts but with a modern look, great for dashboards. ### Advanced Examples #### πŸ”οΈ Area Chart with Styling ```xml ``` **πŸ’‘ Use Case:** Shows volume or magnitude over time with emphasis on total quantity. #### ↔️ Horizontal Bar Chart ```xml ``` **πŸ’‘ Use Case:** Perfect when you have long category names or want to emphasize horizontal comparison. #### πŸ“š Stacked Bar Chart ```xml ``` **πŸ’‘ Use Case:** Shows both individual values and totals across categories. Perfect for comparing parts of a whole across different groups. #### 🎯 Radar Chart for Multi-dimensional Data ```xml ``` **πŸ’‘ Use Case:** Excellent for showing multiple variables for comparison, like skill assessments or product features. #### πŸ”΅ Scatter Plot for Correlation ```xml ``` **πŸ’‘ Use Case:** Shows relationships between two variables, useful for correlation analysis. #### 🫧 Bubble Chart for Multi-dimensional Analysis Bubble charts display three dimensions of data using x and y coordinates plus bubble size. ```xml ``` **πŸ’‘ Use Case:** Perfect for displaying three-dimensional data where the third dimension (bubble size) represents metrics like customer satisfaction, investment size, or population. **Note:** For bubble charts, use `x`, `y`, and `r` attributes instead of `value` in `` components. #### πŸ“± Responsive Chart BoxLang Charts support responsive sizing that adapts to container width and screen sizes. This is ideal for responsive web applications and dashboards. ```xml ``` **πŸ’‘ Use Case:** Perfect for dashboards and mobile-friendly layouts where charts need to adapt to different screen sizes. **Responsive Tips:** * Charts resize automatically to fit their container width (up to `chartWidth`) * Use `maintainAspectRatio="false"` to fill specific container heights * Set custom aspect ratios: `2` for wide (2:1), `1` for square (1:1), `0.5` for tall (1:2) * Add `resizeDelay` for performance optimization on frequently resizing containers ## πŸš€ Advanced Features ### πŸ“Š Series Placement Options Control how multiple data series are displayed in bar charts: **Default (Side-by-side):** ```js seriesplacement="default" ``` **Clustered (Grouped bars):** ```js seriesplacement="cluster" ``` **Stacked (Bars on top of each other):** ```js seriesplacement="stacked" ``` ### 🎨 Color Customization Colors can be specified in multiple formats: ```xml colorlist="FF6384,36A2EB,FFCE56" colorlist="##FF6384,##36A2EB,##FFCE56" colorlist="red,blue,green,yellow" colorlist="rgb(255,99,132),rgb(54,162,235)" ``` **Color Best Practices:** * Use contrasting colors for better accessibility * Limit to 5-7 distinct colors for clarity * Consider colorblind-friendly palettes for inclusive design * Use [ColorBrewer](https://colorbrewer2.org/) for scientifically-designed palettes ### πŸ“ Custom Scales and Ranges Control axis ranges for better data visualization: ```xml ``` **Tips:** * Set `scaleFrom="0"` for bar charts to avoid misleading visualizations * Use custom scales to zoom into specific data ranges * Combine with `labelFormat` for custom axis labels ### πŸ”€ Label Formatting and Rotation Format axis labels and rotate them for better readability: ```xml ``` **Label Position Options:** * `horizontal` - Standard horizontal labels (default) * `up_45` - 45Β° upward rotation * `up_90` - 90Β° upward (vertical) * `down_45` - 45Β° downward rotation * `down_90` - 90Β° downward * `vertical` - Same as `down_90` ### 🎯 Interactive Features Make charts interactive with click events: ```xml ``` ### 🎭 Font and Style Customization Complete control over text appearance: ```xml ``` ### πŸ“ Marker Control Customize data point markers for line and scatter charts: ```xml ``` ## πŸ”§ Chart.js Integration This module is built on [Chart.js v4.x](https://www.chartjs.org/), one of the most popular JavaScript charting libraries. ### πŸ“š Chart.js Resources * **Official Documentation**: * **Chart Types Guide**: * **Configuration Options**: * **Samples**: ### 🎨 Chart.js Features Supported This module exposes most Chart.js capabilities through BoxLang attributes: * βœ… All major chart types (pie, bar, line, doughnut, radar, polar area, scatter) * βœ… Responsive and adaptive sizing * βœ… Custom colors and styling * βœ… Axis configuration and grid lines * βœ… Legends and tooltips * βœ… Stacked and grouped series * βœ… Custom scales and ranges * βœ… Font styling and customization ### πŸ”Œ How It Works 1. **Component Processing**: BoxLang components collect your chart data 2. **Configuration Building**: Data is transformed into Chart.js configuration 3. **Asset Loading**: Chart.js library is automatically included via `htmlHead()` 4. **Rendering**: HTML canvas element is created with inline JavaScript initialization 5. **Interaction**: Chart.js handles all user interactions and animations ### πŸ’‘ Chart.js Best Practices Based on Chart.js documentation, here are some tips: **Performance:** * Use `resizeDelay` for charts that resize frequently * Limit data points to 100-200 for smooth animations * Disable animations for large datasets **Accessibility:** * Always provide axis titles with `xAxisTitle` and `yAxisTitle` * Use `seriesLabel` to describe each data series * Ensure color contrasts meet WCAG standards **Visual Design:** * Keep charts simple - one message per chart * Use appropriate chart types for your data * Add grid lines (`showYGridlines="true"`) for precise reading * Limit colors to 5-7 for clarity ## ❓ Troubleshooting ### Charts Not Displaying **Problem:** Chart area is blank or not visible. **Solutions:** * βœ… Ensure BoxLang web support is enabled * βœ… Check that `htmlHead()` BIF is available * βœ… Verify Chart.js library loads (check browser console) * βœ… Make sure chart container has width/height ### Colors Not Working **Problem:** Custom colors not appearing correctly. **Solutions:** * βœ… Use hex format without # or with ## (BoxLang escaping): `colorlist="FF6384,36A2EB"` * βœ… Check color format: hex values should be 6 characters (e.g., `FF0000` not `F00`) * βœ… Named colors are case-insensitive: `red`, `Red`, `RED` all work ### Responsive Charts Not Resizing **Problem:** Charts don't adapt to container size changes. **Solutions:** * βœ… Set `responsive="true"` (it's default, but verify) * βœ… Ensure parent container has defined width * βœ… Use `maintainAspectRatio="false"` if you need to fill specific heights * βœ… Check for CSS that might be constraining the chart ### Multiple Series Not Stacking **Problem:** Multiple series appear side-by-side instead of stacked. **Solutions:** * βœ… Add `seriesplacement="stacked"` to `` * βœ… Ensure all series have the same chart type * βœ… Stacking only works with `bar`, `line`, and `area` chart types ### Data Not Showing **Problem:** Chart renders but no data appears. **Solutions:** * βœ… Verify all `` components have `item` and `value` attributes * βœ… Check that values are numeric (not strings) * βœ… Ensure `` is nested inside `` * βœ… Verify `` is nested inside `` ### Labels Overlapping **Problem:** X-axis labels overlap and are unreadable. **Solutions:** * βœ… Use `categoryLabelPositions="up_45"` to rotate labels * βœ… Increase `chartWidth` to give more space * βœ… Reduce font size with `fontSize="10"` * βœ… Consider using `horizontalbar` type for long labels ## 🀝 Contributing We ❀️ contributions! This project is open source and welcomes your help to make it even better. ### πŸ› Found a Bug? If you discover a bug, please: 1. **Check existing issues** at [GitHub Issues](https://github.com/ortus-boxlang/bx-charts/issues) 2. **Create a new issue** with: * Clear title and description * Steps to reproduce * Expected vs actual behavior * BoxLang version and environment details * Sample code that demonstrates the issue ### πŸ’‘ Have an Enhancement Idea? We'd love to hear your ideas! Please: 1. Open a [Feature Request](https://github.com/ortus-boxlang/bx-charts/issues/new) 2. Describe the feature and its use case 3. Explain how it would benefit users 4. Consider if it aligns with Chart.js capabilities ### πŸ”§ Want to Contribute Code? Excellent! Here's how to get started: #### Development Setup 1. **Fork and Clone:** ```bash git clone https://github.com/YOUR-USERNAME/bx-charts.git cd bx-charts ``` 2. **Set up Local Development Environment:** ```bash # Creates symbolic link for local module development ./setup.sh ``` This script creates a `boxlang_modules/bx-charts` symbolic link pointing to the current directory, allowing you to test the module locally before publishing. 3. **Install Dependencies:** ```bash # Install BoxLang dependencies box install # Install Node.js dependencies (Chart.js) npm install ``` The `npm install` command will automatically: * Download the latest Chart.js library * Copy it to the `public/` folder 4. **Update Chart.js (Optional):** To manually update Chart.js to the latest version: ```bash npm run update-chartjs ``` 5. **Test the Module Locally:** Start a BoxLang server to test your changes: ```bash # Start the BoxLang server (uses server.json configuration) box start # Visit test pages in your browser # http://localhost:8080/tests/ - Main test index # http://localhost:8080/tests/test-charts-enhanced.bxm - Advanced chart examples # http://localhost:8080/tests/test-responsive-charts.bxm - Responsive chart tests ``` The test files in `/tests/` directory provide comprehensive examples of all chart types and features. 6. **Build the Module (Optional):** To build a distributable version of the module: ```bash # Build with default version (1.0.0) boxlang Build.bx # Build with specific version boxlang Build.bx --version=1.2.3 # Built artifacts will be in build/artifacts/ ``` 7. **Start Format Watcher:** ```bash box run-script format:watch ``` #### Pull Request Guidelines * βœ… Create PRs against the `development` branch (NOT `master`) * βœ… Follow the existing code style (auto-format with cfformat) * βœ… Add tests for new features * βœ… Update documentation as needed * βœ… Keep commits focused and atomic * βœ… Link related issues in PR description #### Code Standards * **BoxLang/CFML**: Follow [cfformat](https://github.com/ortus-boxlang/boxlang-docs/blob/v1.x/boxlang-framework/modularity/.cfformat.json) settings * **Formatting**: Auto-format with `box run-script format` * **Coding Standards**: Follow [Ortus Coding Standards](https://github.com/Ortus-Solutions/coding-standards) ### πŸ“š Improve Documentation Documentation improvements are always welcome: * Fix typos or unclear explanations * Add more examples * Improve code comments * Create tutorials or guides ### πŸ’° Financial Support You can support BoxLang and all Ortus Solutions open source projects: * 🌟 [Become a Patron](https://www.patreon.com/ortussolutions) * πŸ’΅ [One-time PayPal Donation](https://www.paypal.com/paypalme/ortussolutions) Patrons get exclusive benefits like: * Priority support * Early access to new features * FORGEBOX Pro account * CFCasts account ### πŸ“ž Support Channels Need help? Don't create an issueβ€”use our support channels: * πŸ’¬ [Ortus Community Discourse](https://community.ortussolutions.com) * πŸ“± [Box Team Slack](http://boxteam.ortussolutions.com/) * 🏒 [Professional Support](https://www.ortussolutions.com/services/support) ### πŸ† Contributors Thank you to all our amazing contributors! ❀️ [![Contributors](https://contrib.rocks/image?repo=ortus-boxlang/bx-charts)](https://github.com/ortus-boxlang/bx-charts/graphs/contributors) Made with [contributors-img](https://contrib.rocks) ## πŸ” Security Vulnerabilities If you discover a security vulnerability: 1. **DO NOT** create a public issue 2. Email [security@ortussolutions.com](mailto:security@ortussolutions.com?subject=security) 3. Report in `#security` channel on [Box Team Slack](http://boxteam.ortussolutions.com/) All vulnerabilities will be promptly addressed. ## πŸ“„ License This project is licensed under the **Apache License 2.0**. ``` Copyright 2025 Ortus Solutions, Corp Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ``` See [LICENSE](https://github.com/ortus-boxlang/boxlang-docs/blob/v1.x/boxlang-framework/modularity/LICENSE/README.md) file for full details. ## πŸ’Ό Support & Resources ### πŸ“– Documentation * **Module Docs**: You're reading them! πŸ“š * **BoxLang Docs**: * **Chart.js Docs**: ### 🌐 Links * **BoxLang Website**: * **Ortus Solutions**: * **GitHub Repository**: * **Issue Tracker**: ### πŸŽ“ Learning Resources * **BoxLang Training**: * **CFCasts**: * **Blog**: --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://boxlang.ortusbooks.com/boxlang-framework/modularity/charts.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.