# Chart

We use the eCharts charting engine to generate Stadium Charts. Go [here](https://echarts.apache.org/examples/en/index.html) for examples of charts that can be used in Stadium.

***

### How to create a Stadium chart

1. Drag a *Chart* control onto the design canvas.
2. In the *Properties* section, click on the *Chart Editor* icon (next to the Option field).
3. Create your chart:\
   Options -

   * Type the code for an eChart compliant chart in the Chart Editor.

     OR
   * Click the relevant link in the Chart Editor to generate a basic line, column or pie chart.

     OR
   * Paste the option object of a chart that you created on [eCharts](https://echarts.apache.org/examples/en/index.html) into the Chart Editor.

   For this option, do the following:

   1. On the eCharts examples page, click on the chart that you want to use, e.g. Basic Line Chart.
   2. Copy the chart's option object and paste it into the Stadium Chart Editor.

![](/files/7pyrN4DZlXRwEp0SjY8h)

***

### How to load data from a database into your chart

1. Create your chart as per the steps above, but don't provide values for the source in the object option, i.e. *source: \[]*
2. Add a [database *Connector* ](/connectors/database-connector.md)and create a SQL query to fetch your data.
3. Add your SQL query to the [event handler](/features/scripts-and-event-handlers.md) that will load your chart with data (e.g. a page load or button click).
4. Add a [SetValue](/actions/set-value.md) action to the event handler:

* Set the *Target* property to be your chart's option object
* Set the *Value* property to be the same content as your chart's option object, but now include the source value to reference your SQL query (e.g. *source: \~.northwind\_Query1.Results*)


---

# 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://docs.stadium.software/controls/chart.md?ask=<question>
```

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.