> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/chart-components.md).
# Chart components
Use chart components on a page to turn table data into a quick visual summary.
Choose the chart type based on the question you want to answer:
* **Bar chart** for comparing values across categories
* **Line chart** for showing changes over time
* **Pie chart** for comparing proportions
* **Progress chart** for tracking progress toward a goal
Before you add a chart component, make sure you have:
* A clear question the chart should answer
* Numeric values and records that you can group
* Fields to filter the records if the chart should show only relevant ones
## **Add a chart component to a page**
{% stepper %}
{% step %}
#### **Open the Add tab**
In the **Settings** panel, open **Add**.
{% endstep %}
{% step %}
#### **Choose a chart type**
From **Charts**, drag **Bar chart**, **Line chart**, **Pie chart**, or **Progress chart** to the preferred location on the page.
{% endstep %}
{% step %}
#### **Configure the chart**
In the component **Settings**, choose the source and select the field values or expressions the chart should show.
{% endstep %}
{% step %}
#### **Check the result**
Review whether the chart answers the question the page should support.\
Then drag the component to move it on the page.\
Use the resize handles to adjust its size.
{% endstep %}
{% endstepper %}
## **Shared chart component settings**
In **Settings**:
* **Label** for the title shown on the component
* **Internal name** is filled automatically. Change it only if needed and carefully. When you script, you use **Internal name**, not **Label**.
Under **Source** (does not apply to **Progress chart**):
* **Data point** to set up data retrieval. Use **Manual** to configure it with controls, or **Conditional** to use a Ninox Script.\
\
If **Data point** is set to **Manual**:
* **Type** to choose **Bar chart**, **Line chart**, or **Pie chart**
* **Table** to choose the source table
* **Filter** to include only the data you need\
\
If **Data point** is set to **Conditional**:
* **Logic** to add the Ninox Script that retrieves the data.\
In this case, Ninox expects **key-value pairs** in curly braces **{...}.**
Under **Visibility**:
* **Visible** to show the component on the page
* **Hidden** to hide the component on the page
* **Conditional** to define a **Visibility condition** that controls when the component is shown or hidden.
This only affects what is shown on the page. It does not change records or permissions.
{% hint style="info" %}
For the **Logic** under **Data point**, we suggest to use Ninox AI in the [Logic editor](/ninox-scripting/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md). It will support you to create a script for the required result or get an existing script explained.
{% endhint %}
**Let's take a look at an example:**
{% code lineNumbers="true" %}
```
for c in (select customers where count(invoices) > 0) do
{
label: c.full_name,
total: sum(c.invoices.invoice_total)
}
end
```
{% endcode %}
Use this prompt to create the script with Ninox AI:\
"Please show me all customers who have paid the total amount of all their invoices."
## **Chart-specific settings**
### **Bar chart component settings**
Under **Source**, configure the chart data when **Data point** is set to **Manual**:
* **X-axis** to choose how Ninox groups the records
* **Y-axis** to add one or more numeric data fields.\
Use **+ Add data set** to choose a field, with an aggregation, and color.\
Add more fields to compare values in the same chart.\
If you do not select a field here, Ninox uses the **X-axis** field and applies **Count** as the default aggregation.
Under **Display**, configure how the chart appears:
* **Label position** to show labels **Inside** or **Outside**
* **Bar orientation** to show bars **Vertical** or **Horizontal**
Under **Behavior**, configure how the chart behaves:
* **Stacked bars** to combine data sets into one bar per group
* **Show title** to show or hide the chart **Label**
* **Show labels** to show or hide labels in the chart
* **Show legend** to show or hide the legend
* **Show tooltips** to show values when users move over chart elements
* **Show data table** to show or hide the chart values in a table below the chart
### **Line chart component settings**
Under **Source**, configure the chart data when **Data point** is set to **Manual**:
* **X-axis** to choose how Ninox groups the records
* **Y-axis** to add one or more numeric data fields.\
Use **+ Add data set** to choose a field, with an aggregation, and color.\
Add more fields to compare values in the same chart.\
If you do not select a field here, Ninox uses the **X-axis** field and applies **Count** as the default aggregation.
Under **Display**, configure how the chart appears:
* **Label position** to show labels **Inside** or **Outside**
Under **Behavior**, configure how the chart behaves:
* **Smooth lines** to connect values with curved lines
* **Show data points** to show or hide markers on the line
* **Show title** to show or hide the chart **Label**
* **Show labels** to show or hide labels in the chart
* **Show legend** to show or hide the legend
* **Show tooltips** to show values when users move over chart elements
* **Show data table** to show or hide the chart values in a table below the chart
### **Pie chart component settings**
Under **Source**, configure the chart data when **Data point** is set to **Manual**:
* **Category** to choose one field for how Ninox splits the pie into segments
* **Data source** to choose the field and aggregation for the values.\
Available aggregations are **Sum**, **Average**, **Median**, **Minimum**, **Maximum**, or **Count**.\
Use **None** when you do not want to aggregate a field.
Under **Display**, configure how the chart appears:
* **Label position** to show labels **Outside**, **Inside**, or **Center**
* **Style** to choose **Default**, **Rounded corner**, **Semicircle**, or **Pie with pad angle**
Under **Behavior**, configure how the chart behaves:
* **Donut** to show the chart as a donut
* **Show title** to show or hide the chart **Label**
* **Show labels** to show or hide labels in the chart
* **Show legend** to show or hide the legend
* **Show tooltips** to show values when users move over chart elements
* **Show data table** to show or hide the chart values in a table below the chart
### **Progress chart component settings**
Under **Display**, configure how the chart appears:
* **Color** to choose a fixed or dynamic color for the progress ring
Under **Behavior**, configure how the chart behaves:
* **Total** to define the full target value\
For example:\
`sum((select invoices where creation_date > today() - 90).gross_total)`
* **Value** to define the current progress value\
For example:\
`sum((select invoices where creation_date > today() - 30).gross_total)`
{% hint style="info" %}
To remove a component from a page, select the component, then click :trash-can: **Delete component** in the blue menu above it.
{% endhint %}
---
# 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/chart-components.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.