Chart Component Properties

A reference for all properties available in our chart components

Properties

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