> For the complete documentation index, see [llms.txt](https://colah.gitbook.io/illuminate-bi-tool-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://colah.gitbook.io/illuminate-bi-tool-guide/tutorials/tutorials-for-pro-version-professional-edition/tutorial-1-aggregate-and-visualize-your-data/step-6-add-and-configure-chart.md).

# Step 6 - Add & Configure Chart

> Tutorial 1 for Pro Version: Aggregate and Visualize Your Data

## Step 6 - Add HTML5 Chart to Summary Band; Configure Chart

* Navigate to the **Palette** tab in JSS
* Drag and Drop **HTML5 Chart** onto the **Summary Band**
* Select the **Stacked Bar Percent** Chart
  * Be sure to select "Stacked Bar Percent", not "Stacked Bar"
  * Feel free to use "Stacked Column Percent" if you prefer.
* Click **OK**

![](/files/-M4GLxS5U0H9zo8KcY3C)

* Double-click on your chart
* Click **Chart Data > Configuration**
* Double-click on **Level1** under **Category Levels**

![](/files/-M4GLxS7X0a-EiEDXSqM)

#### Add Category Level

* Name your category field
  * The category field is your **x-axis**.  In my example, the x-axis of my chart is the Site Name, so I need to set my category to the Current Site Name field.
* Click on the **Pencil Icon** next to the **Expression** field
* Remove the **"Change Me"** that is there by default
* **Double-click** on your x-axis (aka "category") field
  * Make sure you *double-click* on the field name
  * You should see **$F{field\_name}** appear in the text box
* Click **Finish**
* Click **OK**

![](/files/-M4GLxS9OtA1ID_I3PnJ)

#### Add Series Levels

Set your Series Levels

* In a stacked bar chart, **the "Series Levels" represent each bar in the stack**.
* In my example, each bar in the stack represents a different performance level on the SBA state assessment.

Under **Series Levels:**,

* Click **Add**
* Name your Series Levels "PL" or "Performance Levels" (or whatever is appropriate for the data you're working with)  
* Click the **Pencil Icon** next to the "Expression" field
* **Double-click** on `$F{2014-2015 SBA Summative (Final) ELA Performance Level}`
* Click Finish  
* Set **Value Class Name** to `java.lang.Integer`  
* Set the **Order** field to "**Descending**"
* Click OK

![](/files/-M4GLxSBM_vvYtcLmXvZ)

### Key Concept

* **Set your series levels with a numeric value**.  This will ensure the bars in your stack are sorted correctly.  
* We will change the chart's labels later so that the chart displays the text value of your performance labels.  But when you initially setup your chart, use a numeric value.  

#### Add Measure

* Under "Measures", double-click on **Measure1**
* Name your measure "Students"
* Set the **Label Expression**  
  * Set the "Label Expression" to `"Level"`
    * Make sure your text is surrounded by quotes.
  * The "Label Expression" will appear in the chart's **legend**
  * Feel free to customize the label expression to whatever you think is appropriate.
* Set the **Calculation** to **Distinct Count** (assuming you wanted an unduplicated count of students at each performance level).  
* Click on the **Pencil Icon** next to the **Value Expression** field
* **Remove** "new Integer(1)" from the expression field
* Double-click on **Student ID Field**
* Click **Finish**
* Click **OK**
* Click **OK**

![](/files/-M4GLxSDmE6qkZfR5geA)

[**>> Continue to Step 7. >>**](/illuminate-bi-tool-guide/tutorials/tutorials-for-pro-version-professional-edition/tutorial-1-aggregate-and-visualize-your-data/step-7-resize-chart-preview-report.md)


---

# 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:

```
GET https://colah.gitbook.io/illuminate-bi-tool-guide/tutorials/tutorials-for-pro-version-professional-edition/tutorial-1-aggregate-and-visualize-your-data/step-6-add-and-configure-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.