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

##