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 | 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 | Boolean |
YAxisMinValue | Property to set Minimum value for Y-Axis. | Numeric |
YAxisEnableMaxValue | Property to set Maximum value for Y-Axis using | 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 |
Last updated