> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/brush-chart.md).

# Brush Chart

Brush chart allows users to constrain the results on their graph by choosing to Include or Exclude certain areas. This is a much more interactive filtering method, as the user defines what they want to see or remove by highlighting the particular area on their graph.

{% hint style="info" %}
You can find a more in depth explanation about the brush on [this](<https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/ >) page: [https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/ ](<https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/ >)
{% endhint %}

![Image 1: The Brush Chart](/files/ESOsaXvO13sVzh2K8eSr)

**Properties of Brush Chart**

<table data-header-hidden><thead><tr><th width="73"></th><th width="189"></th><th width="125"></th><th width="131"></th><th></th></tr></thead><tbody><tr><td><strong>N°</strong></td><td><strong>Property Name</strong></td><td><strong>Data type</strong></td><td><strong>Description</strong></td><td></td></tr><tr><td>1</td><td>Data source</td><td>List</td><td>Data Model</td><td>Source of the data list for the widget.</td></tr><tr><td>2</td><td>X axis category</td><td>Text</td><td>Expression</td><td>Text categories displayed on the x-axis.</td></tr><tr><td>3</td><td>Y axis values</td><td>Number</td><td>Expression</td><td>Numerical values ​​displayed on the y-axis.</td></tr><tr><td>4</td><td>Series</td><td>Text</td><td>Expression</td><td><p>This field is used to create different series from the same data source.</p><p>It's not mandatory.</p></td></tr><tr><td>5</td><td>Show Animation</td><td>Boolean</td><td>Expression</td><td>Show render animation. use true or false</td></tr><tr><td>6</td><td>Y-Axis label position</td><td>Text</td><td>Dropdown</td><td><p>Sets the position of the Y axis values ​​to the right or left.</p><p>(left(false), right(true)).</p></td></tr><tr><td>7</td><td>Custom scale</td><td>Boolean</td><td> </td><td>Change the scale to a custom scale with custom properties.</td></tr><tr><td>8</td><td>Min scale value</td><td>Number</td><td>Expression</td><td>Minimum value for the scale.</td></tr><tr><td>9</td><td>Max scale value</td><td>Number</td><td>Expression</td><td>Maximum value for the scale.</td></tr><tr><td>10</td><td>Tick scale amount</td><td>Number</td><td>Expression</td><td>Number of visual marks for the scale.</td></tr><tr><td>11</td><td>Set initial scope</td><td>Boolean</td><td> </td><td>Boolean to specify zoomed values ​​of the chart.</td></tr><tr><td>12</td><td>Start scope value</td><td>Number</td><td>Expression</td><td><p>Initial value of the scope. It can be a number on the X axis (you use its number from left to right, starting at 1)</p><p>Examples:</p><p>If the X axis has 12 months and you want from June you use: 6</p></td></tr><tr><td>13</td><td>End scope value</td><td>Number</td><td>Expression</td><td><p>End value of the scope. It can be a number on the X axis (you use its number from left to right, starting at 1)</p><p>Examples:</p><p>If the X axis has 12 months and you want until December you use: 12</p></td></tr><tr><td>14</td><td>Height</td><td>Text</td><td>Expression</td><td>Height of the main graphic.</td></tr><tr><td>15</td><td>Width</td><td>Text</td><td>Expression</td><td>Width of the main chart.</td></tr><tr><td>16</td><td>Control chart height</td><td>Number</td><td>Expression</td><td>The height value of the lower graph (control).</td></tr><tr><td>17</td><td>Show tooltip</td><td>Boolean</td><td> </td><td>Show tooltips.</td></tr><tr><td>18</td><td>Prefix</td><td>Text</td><td>Expression</td><td>Displays a prefix for values ​​in tooltips.</td></tr><tr><td>19</td><td>Postfix</td><td>Text</td><td>Expression</td><td>Displays a suffix for values ​​in tooltips.</td></tr><tr><td>20</td><td>Label decimals</td><td>Number</td><td>Expression</td><td>Set the number of decimal places displayed for y-axis values.</td></tr><tr><td>21</td><td>Show grid</td><td>Boolean</td><td> </td><td>Boolean to display the grid options.</td></tr><tr><td>22</td><td>Grid lines vertical</td><td>Boolean</td><td>Expression</td><td>Show vertical lines in the grid. Use true or false.</td></tr><tr><td>23</td><td>Grid lines horizontal</td><td>Boolean</td><td>Expression</td><td>Show horizontal lines in the grid. use true or false</td></tr><tr><td>24</td><td>Grid lines color</td><td>Text</td><td>Expression</td><td><p>Change the color of the lines in the grid.</p><p>Example:</p><p>"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"</p></td></tr><tr><td>25</td><td>Background color</td><td>Text</td><td>Expression</td><td><p>Change the background color of the chart.</p><p>Example:</p><p>"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"</p></td></tr><tr><td>26</td><td>Theme</td><td>Text</td><td>Dropdown</td><td>Change the text and background colors of the chart. (Light, Dark).</td></tr><tr><td>27</td><td>Template</td><td>Text</td><td>Dropdown</td><td><a href="https://apexcharts.com/docs/options/theme/">A set of predefined color values ​​for chart groups. </a>(Palette1, Palette2, Palette3, Palette4, Palette5, Palette6, Palette7, Palette8, Palette9, Palette10).</td></tr><tr><td>28</td><td>Lines width</td><td>Number</td><td>Expression</td><td>Numerical value of the thickness of the lines within the graph.</td></tr><tr><td>29</td><td>Legend font size</td><td>Number</td><td>Expression</td><td>Change the font size of the legend.</td></tr><tr><td>30</td><td>Legend position</td><td>Text</td><td>Dropdown</td><td>Change the position of the legend. (Bottom, top, right, left).</td></tr></tbody></table>


---

# 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.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/brush-chart.md?ask=<question>&goal=<endgoal>
```

`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.