# Chart Component Properties

## Properties

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th data-hidden>Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td>Required</td></tr><tr><td>Items</td><td>Property to provide data source of the chart. </td><td></td><td>Yes</td></tr><tr><td>ChartTitle</td><td>Property to provide the title of the chart</td><td>Text</td><td>X</td></tr><tr><td>ChartSubtitle</td><td>Property to provide subtitle for our chart. The subtitle will be displayed below the chart title.</td><td>Text</td><td>X</td></tr><tr><td>ChartTitleAlign</td><td>Property to align the chart title. </td><td><p>Center</p><p>Left</p><p>Right</p></td><td>X</td></tr><tr><td>ShowTooltip</td><td>Property to show tooltip on hover of the bar</td><td>Boolean</td><td>X</td></tr><tr><td>ShowDataLabel</td><td>Property to show data labels on the bar</td><td>Boolean</td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>ShowLegend</td><td>Property to show legends for the graph</td><td>Boolean</td><td>X</td></tr><tr><td>LegendAlign</td><td>Property to set legend alignment</td><td><p>Center</p><p>Left</p><p>Right</p></td><td>X</td></tr><tr><td>LegendPosition</td><td>Property to set legend position</td><td><p>Top</p><p>Botton</p><p>Left </p><p>Right</p></td><td>X</td></tr><tr><td>Theme</td><td>Property to choose different Theme colors for bars.</td><td>Pallette 01 to 10</td><td>X</td></tr><tr><td>ShowDownload</td><td>Property to allow users to download graphs in CSV, SVG and PNG format</td><td>Boolean</td><td>X</td></tr><tr><td>LineType</td><td>Property to show different types of lines</td><td><p>Smooth</p><p>Stepline</p><p>Straight</p></td><td>X</td></tr><tr><td>EnableDarkMode</td><td>Property to enable dark mode for the chart</td><td>Boolean</td><td>X</td></tr><tr><td>ShowYAxisGridlines</td><td>Property to show or hide Gridlines for Y axis.</td><td>Boolean</td><td>X</td></tr><tr><td>ShowXAxisGridlines</td><td>Property to show or hide Gridlines for Y axis.</td><td>Boolean</td><td>X</td></tr><tr><td>ShowYAxisLabel</td><td>Property to show Y-Axis Lable</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisLabelFontSize</td><td>Property to set Y Axis Label Font</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisLabelRotate</td><td>Property to rotate y-axis text label to a specific angle from it’s center</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisLabelOffsetX</td><td>Property to set the left offset for label</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisLabelOffsetY</td><td>Property to sets the top offset for label</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisLabelMaxWidth</td><td>Property to set maximum width for the y-axis labels</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisForceNiceScale</td><td> If set to <code>true</code>, the y-axis scales are forced to generate nice looking rounded numbers even when min/max are provided. Turn this off if you manually set min/max and want it to be unchanged.</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisDecimalsInFloat</td><td>Property to display number of fractions when there are floating values in y-axis.</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisShowForNullSeries</td><td>When turned off, it will hide the y-axis completely for a series which has no data or a series with all null values.</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisTitle</td><td>Property to show Y-Axis Title</td><td>Text</td><td>X</td></tr><tr><td>YAxisEnableMinValue</td><td>Property to set Minimum value for Y-Axis using <code>YAxisMinValue</code> property.</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisMinValue</td><td> Property to set Minimum value for Y-Axis.</td><td>Numeric</td><td>X</td></tr><tr><td>YAxisEnableMaxValue</td><td>Property to set Maximum value for Y-Axis using <code>YAxisMaxValue</code> property.</td><td>Boolean</td><td>X</td></tr><tr><td>YAxisMaxValue</td><td> Property to set Maximum value for Y-Axis.</td><td>Numeric</td><td>X</td></tr><tr><td>ShowXAxisLabel</td><td>Property to show X-Axis labels</td><td>Boolean</td><td>X</td></tr><tr><td>XAxisLabelFontSize</td><td>Property to set size for X-Axis labels.</td><td>Numeric</td><td>X</td></tr><tr><td>XAxisLabelRotate</td><td>Property to rotate x-axis text label to a specific angle from it’s center</td><td>Numeric</td><td>X</td></tr><tr><td>XAxisLabelOffsetX</td><td>Property to set the left offset for label</td><td>Numeric</td><td>X</td></tr><tr><td>XAxisLabelOffsetY</td><td>Property to set the top offset for label </td><td>Numeric</td><td>X</td></tr><tr><td>XAxisLabelMaxHeight</td><td>Property to set maximum width for the y-axis labels </td><td>Numeric</td><td>X</td></tr><tr><td>XAxisTitle</td><td>Property to show X-Axis Title</td><td>Text</td><td>X</td></tr><tr><td>XAxisPosition</td><td>Property to show X-Axis position</td><td><p>Bottom</p><p>Top</p></td><td>X</td></tr><tr><td>XAxisDataType</td><td>Property to choose X-Axis data type</td><td><p>Category</p><p>Datetime</p><p>Numeric</p></td><td>X</td></tr><tr><td>XAxisDateTimeFormat</td><td>Property set datetime format</td><td><p>String </p><p>"dd/mm/yyyy"</p><p>"mm/dd/yyyy"</p><p>"yyyy/mm/dd"</p><p>"dd/mm/yyyy hh:mm:ss"</p><p>"dd-mm-yyyy"</p><p>"mm-dd-yyyy"</p><p>"yyyy-mm-dd"</p><p>"yyyy-mm-dd hh:mm:ss"</p></td><td>X</td></tr><tr><td>PlotPaddingTop</td><td>Property to provide padding from <strong>top</strong> position to render the chart.</td><td>Numeric</td><td>X</td></tr><tr><td>PlotPaddingRight</td><td>Property to provide padding from <strong>right</strong>position to render the chart.</td><td>Numeric</td><td>X</td></tr><tr><td>PlotPaddingBottom</td><td>Property to provide padding from <strong>bottom</strong> position to render the chart.</td><td>Numeric</td><td>X</td></tr><tr><td>PlotPaddingLeft</td><td>Property to provide padding from <strong>left</strong> position to render the chart.</td><td>Numeric</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>FillOpacity</td><td>Property to choose fill Opacity</td><td><p>Numeric </p><p>0 to 1</p></td><td>X</td></tr><tr><td>ChartBackgroundColor</td><td>Property to set background color of chart.</td><td><p>String</p><p>(Hex color code)</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr><tr><td>GradientShade</td><td>Property to change the gradient shade</td><td>Light<br>Dark</td><td><em>X</em></td></tr><tr><td>GradientShadeIntensity</td><td>Property to change the intensity of gradient shade</td><td>Numeric (Ranging from 1 to 15 )</td><td><em>X</em></td></tr><tr><td>GradientOpcityFrom</td><td>Property to change the opacity of gradient starting from</td><td>Decimal (Ranging 0 to 1 )</td><td><em>X</em></td></tr><tr><td>GradientOpcityTo</td><td>Property to the opacity of gradient starting to</td><td>Decimal (Ranging 0 to 1 )</td><td><em>X</em></td></tr><tr><td>GradientDirection</td><td>Property to change the direction of the gradient opacity. </td><td><p>Horizontal</p><p>Vertical</p></td><td>X</td></tr><tr><td>GradientInverse</td><td>Property to reverse the gradient</td><td>Boolean</td><td>X</td></tr><tr><td>GradientStop</td><td>Property to define different stop points for gradient shadesC</td><td>Comma Seperated Points ranging from 0 to 100 <br>(e.g) 0, 20, 65, 85</td><td>X</td></tr></tbody></table>

##


---

# 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.lowcodera.com/component-properties/chart-components.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.