# Chart
The **Chart** element in Acho app builder provides a streamlined solution for data visualization serving various purposes, from business reporting, intricate business intelligence analytics to data science project.
## Configuration
In the Chart configuration, there are three distinct tabs Property, Chart Styles and CSS, each responsible for a specific level of configuration.
### Properties
Properties are the key options for constructing a chart.
**Data source:** Specify the data you want to visualize in the chart. The data source could be Table Node, Query Node, App data and Page data. For App data and Page data, it should be structured as an array of observations. Only for the Table Node, the system will automatically process and transform the data into a format suitable for chart construction. See [Build a chart from Table Nodes](/app-builder/popular-use-cases/build-a-chart-from-table-nodes.md) for details.
**Chart type:** Choose a chart type to load a template. Options include: Line Chart, Stack Bar Chart, Grouped Bar Chart, Pie Chart, Area Chart, Scatter Plot, Heatmap, and Choropleth Map.
**Dimension:** Dimensions are qualitative values. They categorize and label data. For example, in a dataset containing sales figures of different products, 'Product category' could be a dimension. It is the 'what' aspect of your data, providing a context in which the numbers (metrics) can be understood.
**Metric:** Metrics are quantitative values. They provide measurable data to answer "How much?". For instance, in the previous example, the number of units sold would be the metric. Metrics provide the actual numbers that you'd typically plot on a chart to understand magnitude, trends, or comparisons.
### Chart Styles configuration
#### Basic:
All chart types except Choropleth Map will have and x-field and y-field under the Basic section. By default the chart automatically select the first suitable Dimension and Metric as X-field and Y-field.
**X-Field:** Name of the data column to use for the x-axis (horizontal variable).
**Y-Field:** Name of the data column to use for the y-axis (vertical variable).
Some chart types may have additional basic fields to define.
**Breakdown field(Z-Field):** This field allows for a further breakdown or categorization of the data, providing an additional dimension for analysis.
**Size**(Scatter Plot): The name of data column to use for the size of points in scatter plot.
#### X-Axis and Y-Axis configuration
X-axis and Y-axis configurations are for the information present on the two axis, mostly they follows d3 styles, see[ D3 docs](https://github.com/d3/d3-format) for more details:
* **Scale**: Choose how data is distributed. linear, log, pow or sqrt
* **Position**: For the X-axis, decide if it appears at the 'Top' or 'Bottom'. For the Y-axis, set its position to 'Left' or 'Right'.
* **Title**: Define the axis name and its appearance parameters such as its anchor point and color, etc.
* **Line**: Customize the main axis line by setting its end cap style, color, and level of opacity, etc.
* **Tick**: Customize the small axis marks, by setting its count, tick color, the way they're formatted.
* **Label**: Customize the text appearing alongside the axis like label font, label align, label rotation, label color, etc.
* **Grid**: Decide whether you want to display gridlines. If so, you can modify their color, style, and width, etc.
#### Title
Options for configuring the title and subtitle of the chart include settings for orientation, alignment, anchor, rotation, color, displacement values (dx, dy), font type, font size, text limit, and offset.
#### Marker Label
Marker labels are text annotations that are placed near data points or markers to provide additional information about those points, you can customize the Text, Offset, Font, Font size, Text align, Text baseline, Text rotation, Text Color, Label z-index.
#### **Legends:**
Whether the legend is displayed and its format, title, color, etc.
#### Chart Tooltip
The tooltip that pop-out when clicking the data point/area in the chart. You can customized the content and format of the tooltip.
### CSS
General CSS styles like space, padding.
## Supported Events
Choose a chart type to view the corresponding supported events
## Supported Actions
**Render:** Send data in an array of JSONs to display on the chart.
**Set Data:** Change element data. See [Data Store](/app-builder/app-construction/data-store.md).
**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).
{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}
---
# 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.acho.io/app-builder/app-construction/elements/table-and-chart/chart.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.