> For the complete documentation index, see [llms.txt](https://boxlang.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://boxlang.ortusbooks.com/boxlang-framework/modularity/charts/reference.md).

# Reference

## Component Reference

This documentation provides comprehensive reference information for all components in the BoxLang Charts Module.

## Components

### [bx:chart](/boxlang-framework/modularity/charts/reference/components/bx-chart.md)

**Main chart container component**

The primary component that renders interactive charts using Chart.js. Supports responsive design, extensive styling options, and multiple chart types.

### [bx:chartseries](/boxlang-framework/modularity/charts/reference/components/bx-chartseries.md)

**Chart series definition component**

Defines data series within charts, specifying chart type and data sources. Supports component-based, query-based, and array-based data sources.

### [bx:chartdata](/boxlang-framework/modularity/charts/reference/components/bx-chartdata.md)

**Individual data point component**

Represents single data points within chart series. Supports standard value-based data and three-dimensional bubble chart coordinates.

## Quick Start

```xml
<bx:chart title="My Chart" chartWidth="400" chartHeight="300">
    <bx:chartseries type="pie" colorlist="FF6384,36A2EB,FFCE56">
        <bx:chartdata item="Item 1" value="100">
        <bx:chartdata item="Item 2" value="200">
        <bx:chartdata item="Item 3" value="150">
    </bx:chartseries>
</bx:chart>
```

## Chart Types Supported

* **pie** - Circular proportional charts
* **bar** - Vertical bar charts
* **line** - Connected data point charts
* **doughnut** - Pie charts with center holes
* **radar** - Multi-variable circular charts
* **polarArea** - Pie charts with varying radius
* **area** - Line charts with filled areas
* **horizontalbar** - Horizontal bar charts
* **scatter** - X-Y coordinate plots
* **bubble** - Three-dimensional data visualization

## Installation

```bash
box install bx-charts
```

Requires BoxLang 1.0.0+ with web support enabled.

## Module Information

* **Version**: 1.0.0+
* **Author**: Ortus Solutions
* **License**: Apache 2.0
* **Dependencies**: Chart.js (included)
* **BoxLang Version**: 1.0.0+


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://boxlang.ortusbooks.com/boxlang-framework/modularity/charts/reference.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.