Stacked Bar Chart Attributes

FroalaCharts will render here

Functional Attributes

These attributes let you control a variety of functional elements on the chart. For example, you can opt to show/hide data labels, data values. You can also set chart limits and extended properties.

animation

This attribute gives you the option to control animation in your charts. If you do not want to animate any part of the chart, set this as 0.

Type: Boolean

Range: 0/1

animationDuration

labelBinSize

This attribute is used to skip the labels of the data plots. When set to 1, minimum one label will be displayed within the width of one pixel. To disable this label skipping, set this attribute to 0.

Default value: 1

Type: Number

Range: In Pixels

theme

This attribute changes the theme of the chart. There are 7 types of themes which have been made according to the different color combinations.

Type: String

Range: 'froala', 'candy'

These attributes let you set and configure custom chart messages, using text as well as images. These attributes are supported in Froala Charts constructor (FroalaCharts({ })).

baseChartMessageFont

This attribute allows to set a custom font for all chart messages.

Type: String

Range:

baseChartMessageFontSize

This attribute allows to set a custom font size for all chart messages.

Type: Number

Range: In pixels

baseChartMessageColor

This attribute allows to set a custom font color for all chart messages.

Type: Color

Range: Hex Color Code

baseChartMessageImageHAlign

This attribute allows to set a custom horizontal alignment for all images displayed as chart messages.

Default value: middle

Type: String

Range: left, middle, right

baseChartMessageImageVAlign

This attribute allows to set a custom vertical alignment for all images displayed as chart messages.

Default value: middle

Type: String

Range: top, middle, bottom

baseChartMessageImageAlpha

This attribute allows to set a transparency for all images displayed as chart messages.

Default value: 100

Type: Number

Range: 0 - 100

baseChartMessageImageScale

This attribute allows to set a scale for magnifying all images displayed as chart messages.

loadMessageImageVAlign

If an image is displayed as the chart loadMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Type: String

Range: top, middle, bottom

loadMessageImageAlpha

If an image is displayed as the chart loadMessage, this attribute allows to set the transparency of the image.

Default value: 100

Type: Number

Range: 0 - 100

loadMessageImageScale

If an image is displayed as the chart loadMessage, this attribute allows to set the scale for magnifying the image.

typeNotSupportedMessageImageVAlign

If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Type: String

Range: top, middle, bottom

typeNotSupportedMessageImageAlpha

If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set the transparency of the image.

Default value: 100

Type: Number

Range: 0 - 100

typeNotSupportedMessageImageScale

If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set the scale for magnifying the image.

renderErrorMessageImageVAlign

If an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Type: String

Range: top, middle, bottom

renderErrorMessageImageAlpha

If an image is displayed as the chart renderErrorMessage, this attribute allows to set the transparency of the image.

Default value: 100

Type: Number

Range: 0 - 100

renderErrorMessageImageScale

If an image is displayed as the chart renderErrorMessage, this attribute allows to set the scale for magnifying the image.

dataLoadStartMessageImageVAlign

If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Type: String

Range: top, middle, bottom

dataLoadStartMessageImageAlpha

If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set the transparency of the image.

Default value: 100

Type: Number

Range: 0 - 100

dataLoadStartMessageImageScale

If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set the scale for magnifying the image.

dataEmptyMessageImageVAlign

If an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Type: String

Range: top, middle, bottom

dataEmptyMessageImageAlpha

If an image is displayed as the chart dataEmptyMessage, this attribute allows to set the transparency of the image.

Default value: 100

Type: Number

Range: 0 - 100

dataEmptyMessageImageScale

If an image is displayed as the chart dataEmptyMessage, this attribute allows to set the scale for magnifying the image.

dataLoadErrorMessageImageVAlign

If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Type: String

Range: top, middle, bottom

dataLoadErrorMessageImageAlpha

If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set the transparency of the image.

Default value: 100

Type: Number

Range: 0 - 100

dataLoadErrorMessageImageScale

If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set the scale for magnifying the image.

dataInvalidMessageImageVAlign

If an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Type: String

Range: top, middle, bottom

dataInvalidMessageImageAlpha

If an image is displayed as the chart dataInvalidMessage, this attribute allows to set the transparency of the image.

Default value: 100

Type: Number

Range: 0 - 100

dataInvalidMessageImageScale

If an image is displayed as the chart dataInvalidMessage, this attribute allows to set the scale for magnifying the image.

Default value: 100

This attribute if set to _0_, hides the x-axis of the chart.

Default value: 1

Type: Boolean

Range: 0/1

xAxisPosition

This attribute sets the position of the x-axis in the chart.

Default value: Bottom

Type: String

Range: Top, Bottom

yAxisPosition

This attribute sets the position of the y-axis in the chart.

Specifies the decimal precision of yAxis values when adjustDiv is set to 0.

Type: Number

Range: 0-10

Whether the border around the x-axis name should be rendered using dashed lines.

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

xAxisNameBorderDashLen

Sets the length of each dash when the border around the x-axis name is rendered using dashed lines.

Type: Number

Range: In pixels

xAxisNameBorderDashGap

Sets the gap between consecutive dashes when the border around the x-axis name is rendered using dashed lines.

Type: Number

Range: In pixels

Whether the border around the y-axis name should be rendered using dashed lines.

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

yAxisNameBorderDashLen

Sets the length of each dash when the border around the y-axis name is rendered using dashed lines.

Type: Number

Range: In pixels

yAxisNameBorderDashGap

Sets the gap between two consecutive dashes when the border around the y-axis name is rendered using dashed lines.

Type: Number

rotateVLineLabels

This attribute lets you set whether the vline labels will show up as rotated labels on the chart.

Default value: 0

Type: Boolean

Range: 0/1

usePlotGradientColor

Gradient color is a color added globally to the entire plot of chart by specifying the second color in an attribute. This attribute sets the gradient color to _true_.

Default value: 1

Type: Boolean

Range: 0/1

minPlotHeightForValue

Set the minimum height in pixel of a bar above which the data values will be visible.

Type: Number

Range: In Pixels

Whether the border around the data values should be rendered using dashed lines.

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

valueBorderDashLen

Sets the length of each dash when the border around the data values is rendered using dashed lines.

Type: Number

Range: In pixels

valueBorderDashGap

Sets the gap between two consecutive dashes when the border around the data values is rendered using dashed lines.

Type: Number

Range: In pixels

textOutline

Set this attribute to 1 to draw a border on the data value text.

Default value: 0

Type: Boolean

Sets the background color for the Y-axis values.

Type: Color

Range: Hex Color Code

yAxisValueBorderColor

Sets the border color for the Y-axis values.

Type: Color

Range: Hex Color Code

yAxisValueAlpha

Sets the transparency for the Y-axis values between transparent (for 0) and opaque (for 100).

Makes the Y-axis value borders dashed.

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

yAxisValueBorderDashLen

Sets the lengths of the individual dashes when the Y-axis value borders are dashed.

Type: Number

Range: In pixels

yAxisValueBorderDashGap

Sets the gaps between individual dashes when the Y-axis value borders are dashed.

Type: Number

Range: In pixels

yAxisValueLink

Sets a target link for all Y-axis values.

Type: URL

Range:

Divisional Lines & Grids

numDivLines divLineColor divLineThickness divLineAlpha divLineDashed divLineDashLen divLineDashGap zeroPlaneColor zeroPlaneThickness zeroPlaneAlpha showZeroPlaneValue showAlternateVGridColor alternateVGridColor alternateVGridAlpha

Using this set of attributes, you can control the properties of divisional lines, zero plane and alternate color bands. Divisional Lines are horizontal or vertical lines running through the canvas. Each divisional line signifies a smaller unit of the entire axis thus aiding the users in interpreting the chart. The zero plane is a 2D/3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, you won't see a visible zero plane. Alternate color bands are colored blocks between two successive divisional lines.

numDivLines

Number of horizontal axis division lines that you want on the chart.

Type: Number

Range: Numeric value > 0

divLineColor

Color for divisional lines.

Type: Color

Range: Hex Color Code

divLineThickness

Thickness of divisional lines.

Type: Number

Range: 1-5

divLineAlpha

Alpha of divisional lines.

Type: Number

Range: 0 - 100

divLineDashed

Whether the divisional lines should be rendered as dashed lines.

Range: Positive Integer

Sets the starting angle of for drawing the legend icon.

Default value: 45

Type: Number

Range:

alignLegendWithCanvas

This attribute if set to 0, the legend box will be center aligned with respect to the entire width of the chart only if the total width of the legend box is more than the canvas width. By default, the legend box is center aligned with respect to the canvas width and it remains the same if the width of the legend box is less than the canvas width.

Type: Boolean

Range: 0/1

In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give an error while converting to number. So, Froala Charts accepts the input decimal and thousand separator from user, so that it can convert it accordingly into the required format. This attribute lets you input the decimal separator.

Type: String

Range: Character

inThousandSeparator

Type: String

Range: Character

decimals

Number of decimal places to which all numbers on the chart will be rounded to.

Type: Number

Range: 0-10

forceDecimals

Whether to add 0 padding at the end of decimal numbers. For example, If you limit the maximum number of decimal digits to 2, a number like 55.345 will be rounded to 55.34. This does not mean that all numbers will be displayed with a fixed number of decimal places. For instance 55 will not be displayed as 55.00 and 55.1 will not become 55.10. In order to have fixed number of decimal places attached to all the numbers, set this attribute to 1.

Type: Boolean

Range: 0/1

Font Properties

baseFont baseFontSize baseFontColor outCnvBaseFont outCnvBaseFontSize outCnvBaseFontColor

Using the attributes below, you can define the generic font properties for all the text on the chart. These attributes allow you a high level control over font properties. If you intend to specify font properties for individual chart elements (like Caption, sub-caption etc.), you'll need to use the Styles feature of Froala Charts. Using Styles, you can also specify advanced font properties like Bold, Italics, HTML Mode etc.

baseFont

This attribute lets you set the font face (family) of all the text (data labels, values etc.) on chart. If you specify the outCnvBaseFont attribute also, then this attribute controls only the font face of text within the chart canvas bounds.

Type: String

Range: Font Name

baseFontSize

This attribute sets the base font size of the chart i.e., all the values and the names in the chart which lie on the canvas will be displayed using the font size provided here.

Type: Number

Range: 6 - 72

baseFontColor

This attribute sets the base font color of the chart i.e., all the values and the names in the chart which lie on the canvas will be displayed using the font color provided here.

Type: Color

Range: Hex Color Code

outCnvBaseFont

This attribute sets the base font family of the chart text which lies outside the canvas i.e., all the values and the names in the chart which lie outside the canvas will be displayed using the font name provided here.

Type: String

Range: Font Name

outCnvBaseFontSize

This attribute sets the base font size of the chart i.e., all the values and the names in the chart which lie outside the canvas will be displayed using the font size provided here.

Type: Number

Range: 6 - 72

outCnvBaseFontColor

Range: 0/1

plottooltext

Range:

Attributes for Exporting Charts

exportEnabled exportAction exportHandler exportFormats exportMode exportShowMenuItem exportTargetWindow exportFileName

These attributes allow you to control the saving of chart as image, SVG or XLSX.

exportEnabled

Whether the chart will allow exporting to images, PDFs, SVG, XLSX or CSV format.

Default value: 0

Type: Boolean

Range: 0/1

exportAction

In case of server-side exporting, the action specifies whether the exported image will be sent back to client as download, or whether it'll be saved on the server.

Default value: download

Type: String

Range: 'save' or 'download'

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

plotBorderHoverDashLen

When a data plot is hovered, this attribute is used to set the length of each dash if the border around the data plots are rendered using dashed lines.

Type: Number

Range: In pixels

plotBorderHoverDashGap

When a data plot is hovered, this attribute is used to set the gap between consecutive dashes if the border around the data plots are rendered using dashed lines.

Type: Number

font fontColor fontSize

The categories object and the category object (child of the categories object) are used to specify x-axis labels for multi-series charts. The attributes of the categories object are used to set the font properties of all x-axis labels collectively.

font

Lets you specify font face for the x-axis data labels.

Type: String

Range: Valid font face

fontColor

Lets you specify font color for the x-axis data labels.

Type: Color

Range: Hex Color Code

The category Object

label showLabel toolText font fontColor fontSize fontBold fontItalic bgColor borderColor alpha bgAlpha borderAlpha borderPadding borderRadius borderThickness borderDashed borderDashLen borderDashGap

The attributes of the category object are used to define and customize individual x-axis labels for multi-series charts.

label

borderDashed

Whether the border around x-axis label should be rendered using dashed lines.

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

borderDashLen

Sets the length of each dash when the border around the x-axis label is rendered using dashed lines.

Type: Number

Range: In pixels

borderDashGap

Sets the gap between two consecutive dashes when the border around x-axis label is rendered using dashed lines.

Type: Number

Range: In pixels

Vertical Data Separator Lines

vLine color thickness alpha dashed dashLen dashGap label showLabelBorder linePosition labelPosition labelHAlign labelVAlign

Vertical data separator lines help you separate data blocks. These lines run through the height of the chart, thereby segregating the data into two different blocks. Vertical lines are defined as shown in the example below:


"categories": [{
	"category": [{
			"label": "Grade 1",
		},
		{
			"vLine": "true",
			"label": "Appraisal"
		}]
	}]

You can configure the cosmetics of vertical separator lines using the following attributes:

vLine

Set this attribute to true to render a vertical data separator line.

Type: String

Range:

This attribute sets the border's transparency for data plots of a particular dataset on hover.

Type: Number

Range: 0 - 100

borderHoverThickness

This attribute sets the thickness for data plot's border of a particular dataset on hover.

Type: Number

Range: In pixels

borderHoverDashed

When a data plot is hovered, this attribute is used to specify whether a data plot border will be rendered as a dashed line.

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

borderHoverDashLen

When a data plot is hovered, this attribute is used to set the length of each dash if the border around a data plot is rendered using dashed lines.

Type: Number

Range: In pixels

borderHoverDashGap

When a data plot is hovered, this attribute is used to set the gap between consecutive dashes if the border around a data plot is rendered using dashed lines.

Type: Number

Range: In pixels

The data Object

Attributes of the data object, child of the dataset object, are used to define the values to be plotted for individual data series. The dataset and data objects defined for one data series are shown in the example below:


"dataset": [{
	"seriesname": "Previous Year",
	"data": [{
			"value": "10000",
		},
		{
			"value": "11500",
		},
		{
			"value": "12500",
		},
		{
			"value": "15000"
		}]
}]

borderHoverThickness

This attribute sets the thickness for a data plot's border on hover.

Type: Number

Range: In pixels

borderHoverDashed

When a data plot is hovered, this attribute is used to specify whether a data plot border will be rendered as a dashed line.

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

borderHoverDashLen

When a data plot is hovered, this attribute is used to set the length of each dash if the border around a data plot is rendered using dashed lines.

Type: Number

Range: In pixels

borderHoverDashGap

When a data plot is hovered, this attribute is used to set the gap between consecutive dashes if the border around a data plot is rendered using dashed lines.

Type: Number

Range: In pixels

Whether the trendline should be rendered as dashed lines.

Default value: 0 (trendline rendered using straight lines)

Type: Boolean

Range: 0/1

dashLen

Sets the width of each dash when trendline is rendered as dashed lines.

Type: Number

Range: In pixels

dashGap

Sets the gap between consecutive dashes when trendline is rendered as dashed lines.

Type: Number

Range: In pixels

toolText

Custom tool-text for this trendline/zone.

Type: String

Range:

Sets whether the trend-line display value will be bold formatted.

Default value: 0 (not bold formatted)

Type: Boolean

Range: 0/1

trendValueFontItalic

Sets whether the trend-line display value will be italicized.

Default value: 0 (not italicized)

Type: Boolean

Range: 0/1

trendValueBgColor

Sets the background color for the trend-line display value.

Type: Color

Range: Hex Color Code

trendValueBorderColor

Sets the border color for the trend-line display value.

Type: Color

Range: Hex Color Code

trendValueAlpha

Sets the transparency for the trend-line display value.

Default value: 100

Type: Number

Range: 0 - 100

trendValueBgAlpha

Sets the transparency for the background of the trend-line display value.

Default value: 100

Type: Number

Range: 0 - 100

trendValueBorderAlpha

Sets the transparency for the border around the trend-line display value.

Default value: 100

Type: Number

Range: 0 - 100

trendValueBorderPadding

Sets padding for the border around the trend-line display value.

Type: Number

Range: In pixels

trendValueBorderRadius

Sets the radius for the border around the trend-line display value.

Type: Number

Range: In pixels

trendValueBorderThickness

Sets the thickness for the border around the trend-line display value.

Type: Number

Range: In pixels

trendValueBorderDashed

Whether the border around the trend-line display value should be rendered as dashed lines.

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

trendValueBorderDashLen

Sets the length of each dash when the border around the trend-line display value is rendered as dashed lines.

Type: Number

Range: In pixels

trendValueBorderDashGap

Sets the gap between two consecutive dashes when the border around the trend-line display value is rendered as dashed lines.

Type: Number

Range: In pixels

Stacked Bar Chart Attributes

Functional Attributes

animation

animationDuration

palette

paletteColors

showLabels

labelStep

maxLabelWidthPercent

minLabelWidthPercent

useEllipsesWhenOverflow

showValues

showLimits

showDivLineValues

showShadow

adjustDiv

clickURL

clickURLOverridesPlotLinks

showSum

stack100Percent

showPercentValues

showPercentInToolTip

hasRTLText

plotHighlightEffect

showPrintMenuItem

maxBarHeight

plotBinSize

labelBinSize

theme

Chart Message-related Attributes

baseChartMessageFont

baseChartMessageFontSize

baseChartMessageColor

baseChartMessageImageHAlign

baseChartMessageImageVAlign

baseChartMessageImageAlpha

baseChartMessageImageScale

loadMessage

loadMessageFont

loadMessageFontSize

loadMessageColor

loadMessageImageHAlign

loadMessageImageVAlign

loadMessageImageAlpha

loadMessageImageScale

typeNotSupportedMessage

typeNotSupportedMessageFont

typeNotSupportedMessageFontSize

typeNotSupportedMessageColor

typeNotSupportedMessageImageHAlign

typeNotSupportedMessageImageVAlign

typeNotSupportedMessageImageAlpha

typeNotSupportedMessageImageScale

renderErrorMessage

renderErrorMessageFont

renderErrorMessageFontSize

renderErrorMessageColor

renderErrorMessageImageHAlign

renderErrorMessageImageVAlign

renderErrorMessageImageAlpha

renderErrorMessageImageScale

dataLoadStartMessage

dataLoadStartMessageFont

dataLoadStartMessageFontSize

dataLoadStartMessageColor

dataLoadStartMessageImageHAlign

dataLoadStartMessageImageVAlign

dataLoadStartMessageImageAlpha

dataLoadStartMessageImageScale

dataEmptyMessage

dataEmptyMessageFont

dataEmptyMessageFontSize

dataEmptyMessageColor

dataEmptyMessageImageHAlign

dataEmptyMessageImageVAlign

dataEmptyMessageImageAlpha

dataEmptyMessageImageScale

dataLoadErrorMessage

dataLoadErrorMessageFont

dataLoadErrorMessageFontSize