Sankey Chart Attributes

orientation

This attribute lets you specify whether the Sankey Diagram should have a vertical or horizontal orientation.

Default value: horizontal

Type: String

Range: vertical / horizontal

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

This attribute sets the animation duration of the chart. animationDuration attribute is applicable only if animation of the chart is enabled.

Default value: 1 sec

Type: Number

Range: In seconds

palette

Froala Charts uses the concept of Color Palettes. Each chart has 5 pre-defined color palettes which you can choose from. Each palette renders the chart in a different color theme.

Type: Number

Range: 1-5

paletteColors

While the palette attribute allows to select a palette theme that applies to chart background, canvas, font and tool-tips, it does not change the colors of data items (i.e., column, line, pie etc.). Using paletteColors attribute, you can specify your custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., "paletteColors": "#FF0000, #0372AB, #FF5904...". The chart will cycle through the list of specified colors and then render the data plot accordingly. To use the same set of colors throughout all your charts in a web application, you can store the list of palette colors in your application globally and then provide the same in each chart JSON.

Type: String

Range: List of hex color codes separated by comma

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'

enableDrag

This attribute allows you to enable/disable dragging of nodes in a chart.

Type: Boolean

Range: 0/1

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.

Default value: 100

Type: Number

Range: 0-300

loadMessage

This attribute allows to set the message to be displayed when a chart begins to load. To display an image as the chart message, prefix I- to the image URL.

Type: String

Range:

loadMessageFont

This attribute allows to set the font for the message displayed when a chart begins to load.

Type: String

Range: Font Name

loadMessageFontSize

This attribute allows to set the font size for the message displayed when a chart begins to load.

Type: Number

Range: In pixels

loadMessageColor

This attribute allows to set the font color for the message displayed when a chart begins to load.

Type: Color

Range: Hex Color Code

loadMessageImageHAlign

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

Default value: value assigned to the baseChartMessageImageHAlign attribute

Type: String

Range: left, middle, right

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.

Default value: 100

Type: Number

Range: 0-300

typeNotSupportedMessage

This attribute allows to set the message to be displayed when the specified chart type is not supported. To display an image as the chart message, prefix I- to the image URL.

Type: String

Range:

typeNotSupportedMessageFont

This attribute allows to set the font for the message displayed when the specified chart type is not supported.

Type: String

Range: Font Name

typeNotSupportedMessageFontSize

This attribute allows to set the font size for the message displayed when the specified chart type is not supported.

Type: Number

Range: In pixels

typeNotSupportedMessageColor

This attribute allows to set the font color for the message displayed when the specified chart type is not supported.

Type: Color

Range: Hex Color Code

typeNotSupportedMessageImageHAlign

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

Default value: value assigned to the baseChartMessageImageHAlign attribute

Type: String

Range: left, middle, right

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.

Default value: 100

Type: Number

Range: 0-300

renderErrorMessage

This attribute allows to set the message to be displayed if an error is encountered while rendering the chart. To display an image as the chart message, prefix I- to the image URL.

Type: String

Range:

renderErrorMessageFont

This attribute allows to set a font for the message displayed if an error is encountered while rendering the chart.

Type: String

Range: Font Name

renderErrorMessageFontSize

This attribute allows to set the font size for the message displayed if an error is encountered while rendering the chart.

Type: Number

Range: In pixels

renderErrorMessageColor

This attribute allows to set the font color for the message displayed if an error is encountered while rendering the chart.

Type: Color

Range: Hex Color Code

renderErrorMessageImageHAlign

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

Default value: value assigned to the baseChartMessageImageHAlign attribute

Type: String

Range: left, middle, right

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.

Default value: 100

Type: Number

Range: 0-300

dataLoadStartMessage

This attribute allows to set the message to be displayed when chart data begins loading. To display an image as the chart message, prefix I- to the image URL.

Type: String

Range:

dataLoadStartMessageFont

This attribute allows to set a font for the message displayed when chart data begins loading.

Type: String

Range: Font Name

dataLoadStartMessageFontSize

This attribute allows to set the font size for the message displayed when chart data begins loading.

Type: String

Range: In pixels

dataLoadStartMessageColor

This attribute allows to set the font color for the message displayed when chart data begins loading.

Type: Color

Range: Hex Color Code

dataLoadStartMessageImageHAlign

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

Default value: value assigned to the baseChartMessageImageHAlign attribute

Type: String

Range: left, middle, right

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.

Default value: 100

Type: Number

Range: 0-300

dataEmptyMessage

This attribute allows to set the message to be displayed if the data loaded for a chart is empty. To display an image as the chart message, prefix I- to the image URL.

Type: String

Range:

dataEmptyMessageFont

This attribute allows to set the font for the message displayed if the data loaded for a chart is empty

Type: String

Range: Font Name

dataEmptyMessageFontSize

This attribute allows to set the font size for the message displayed if the data loaded for a chart is empty.

Type: Number

Range: In pixels

dataEmptyMessageColor

This attribute allows to set the font color for the message displayed if the data loaded for a chart is empty.

Type: Color

Range: Hex Color Code

dataEmptyMessageImageHAlign

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

Default value: value assigned to the baseChartMessageImageHAlign attribute

Type: String

Range: left, middle, right

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.

Default value: 100

Type: Number

Range: 0-300

dataLoadErrorMessage

This attribute allows to set the message to be displayed if an error is encountered while loading chart data. To display an image as the chart message, prefix I- to the image URL.

Type: String

Range:

dataLoadErrorMessageFont

This attribute allows to set a font for the message displayed if an error is encountered while loading chart data.

Type: String

Range: Font Name

dataLoadErrorMessageFontSize

This attribute allows to set the font size for the message displayed if an error is encountered while loading chart data.

Type: Number

Range: In pixels

dataLoadErrorMessageColor

This attribute allows to set the font color for the message displayed if an error is encountered while loading chart data.

Type: Color

Range: Hex Color Code

dataLoadErrorMessageImageHAlign

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

Default value: value assigned to the baseChartMessageImageHAlign attribute

Type: String

Range: left, middle, right

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.

Default value: 100

Type: Number

Range: 0-300

dataInvalidMessage

This attribute allows to set the message to be displayed if the data to be loaded for the chart is invalid. To display an image as the chart message, prefix I- to the image URL.

Type: String

Range:

dataInvalidMessageFont

This attribute allows to set the font for the message displayed if the specified chart data is invalid.

Type: String

Range: Font Name

dataInvalidMessageFontSize

This attribute allows to set the font size for the message displayed if the specified chart data is invalid.

Type: Number

Range: In pixels

dataInvalidMessageColor

This attribute allows to set the font color for the message displayed if the specified chart data is invalid.

Type: Color

Range: Hex Color Code

dataInvalidMessageImageHAlign

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

Default value: value assigned to the baseChartMessageImageHAlign attribute

Type: String

Range: left, middle, right

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

Type: Number

Range: 0-300

captionAlignment

Sets horizontal alignment of caption

Type: String

Range: "left", "center", "right"

captionOnTop

Whether caption should be on top of the data plot area

Type: Boolean

Range: 0/1

captionFontSize

Sets the caption font size in pixels

Type: Number

Range: 6 - 72

subCaptionFontSize

Sets the sub-caption font size (in pixels)

Type: Number

Range: 6 - 72

captionFont

Sets the caption font family

Type: String

Range: Font Name

subCaptionFont

Sets the sub-caption font family

Type: String

Range: Font Name

captionFontColor

Sets the caption font color

Type: Color

Range: Hex Color Code

subCaptionFontColor

Sets the sub-caption font color

Type: Color

Range: Hex Color Code

captionFontBold

Whether the caption font should be displayed in bold

Type: Boolean

Range: 0/1

subCaptionFontBold

Whether the sub caption font should be displayed in bold

Type: Boolean

Range: 0/1

alignCaptionWithCanvas

Whether the caption is aligned with the canvas. Else, it will be aligned with the entire chart area

Type: Boolean

Range: 0/1

captionHorizontalPadding

If caption is not centre aligned, lets you configure the padding (in pixels) from either edge. Will be ignored if caption is centre aligned.

Type: Number

Range: In Pixels

bgColor

This attribute sets the background color for the chart. You can set any hex color code as the value of this attribute. To specify a gradient as background color, separate the hex color codes of each color in the gradient using comma. Example: #FF5904, #FFFFFF.

Type: Color

Range: Hex Color Code

bgAlpha

Sets the alpha (transparency) for the background. If you've opted for gradient background, you need to set a list of alpha(s) separated by comma.

Type: Number

Range: 0 - 100

showBorder

Whether to show a border around the chart or not.

Type: Boolean

Range: 0/1

borderColor

Border color of the chart.

Type: Color

Range: Hex Color Code

borderThickness

Border thickness of the chart.

Type: Number

Range: In Pixels

borderAlpha

Border alpha of the chart.

Type: Number

Range: 0 - 100

inheritLabelColorFromNode

This attribute allows you to enforce whether or not a label should inherit its color from the corresponding node.

Default value: 1

Type: Boolean

Range: 0/1

nodeLabelPadding

This attribute lets you set the spacing between the label and the node. It is not applicable when a node label is placed inside the node.

Type: Number

Range: In pixels

nodeSpacing

This attribute lets you set the spacing between two labels in a column. It is not applicable if nodeRelaxation is enabled.

Type: Number

Range: In pixels

nodeWidth

This attribute allows you to set the width of a node.

Type: Number

Range: In Pixels

nodeRelaxation

This attribute allows you to specify whether nodes in the chart will automatically be repositioned to create an organized look.

Default value: 1

Type: Boolean

Range: 0 / 1

nodeLinkPadding

This attribute allows you to set the space between a node and the corresponding link.

Type: Number

Range: In Pixels

showNodeLabels

This attribute lets you specify whether or not node labels should be displayed.

Default value: 1

Type: Boolean

Range: 0 / 1

showNodeValues

This attribute lets you specify whether or not node values should be displayed.

Default value: 1

Type: Boolean

Range: 0 / 1

rotateNodeLabels

This attribute lets you specify whether or not node labels should be rotated and displayed.

Default value: 1

Type: Boolean

Range: 0 / 1

nodeLabelPosition

This attribute lets you position the labels with respect to the nodes.

Default value: end

Type: String

Range: start, inside, end

nodeColor

This attribute allows you to specify the color of the node.

Type: Color

Range: Hex Color Code

nodeAlpha

This attribute lets you set the transparency of the node between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

nodeLabelFont

This attribute lets you set the font family for the node label text.

Type: String

Range: Font Name

nodeLabelFontColor

This attribute lets you set the font color for the node label text.

Type: Color

Range: Hex Color Code

nodeLabelAlpha

This attribute lets you set the transparency of the node label between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

nodeLabelBgColor

This attribute allows you to set the background color of the node label.

Type: Color

Range: Hex Color Code

nodeLabelBorderColor

This attribute allows you to set the color of the node label border.

Type: Color

Range: Hex Color Code

nodeLabelBorderThickness

This attribute allows you to set the thickness of the node label border.

Type: Number

Range: In pixels

nodeLabelFontSize

This attribute lets you set the font size of the node label text.

Type: Number

Range: 0 - 72

nodeLabelFontBold

This attribute lets you specify whether or not the node label text should be displayed in bold.

Default value: 0

Type: Boolean

Range: 0 / 1

nodeLabelFontItalic

This attribute lets you specify whether or not the node label text should be displayed in italic.

Default value: 0

Type: Boolean

Range: 0 / 1

nodeLabelborderradius

This attribute lets you set the radius of the node label border.

Type: Number

Range: In pixels

nodeLabelBorderPadding

This attribute lets you set the space between the node label border and the node label.

Type: Number

Range: In Pixels

nodeLabelBorderDashed

This attribute lets you specify whether or not the border of the node label should be dashed.

Default value: 0

Type: Boolean

Range: 0 / 1

nodeLabelBorderDashlen

This attribute allows you to set the length of every dash in the border of the node label. It only works if the value of nodeLabelBorderDashed attribute is set to 1.

Type: Number

Range: In pixels

nodeLabelBorderDashgap

This attribute allows you to set the space between two consecutive dashes in the border of the node label. It only works if the value of nodeLabelBorderDashed attribute is set to 1.

Type: Number

Range: In pixels

linkColor

This attribute allows you to specify the color of the link.

Type: Color

Range: Hex Color Code

linkAlpha

This attribute lets you set the transparency of the link between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

linkCurvature

This attribute lets you specify whether the link should be drawn straight or curved.

Type: Number

Range: 0 - 1

showLegend

Whether to show legend on the chart.

Type: Boolean

Range: 0/1

legendItemFontBold

Whether legend keys should be displayed in bold

Type: Boolean

Range: 0/1

legendItemFont

Sets legend item font

Type: String

Range: Font Name

legendItemFontSize

Sets legend item font size

Type: Number

Range: 6 - 72

legendItemFontColor

Sets legend item font color

Type: Color

Range: Hex Color Code

legendItemHoverFontColor

Sets legend item font color on hover

Type: Color

Range: Hex Color Code

legendPosition

The legend can be plotted at different positions with respect to the chart. Note that if the value of legendPosition is set to absolute, you also need to set the coordinates of the legend. You can do that using the attributes legendXPosition and legendYPosition, both of which accept absolute or percentage values.

Type: String

Range: bottom, right, top, top-left, top-right, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom, and absolute

legendXPosition

When the value of legendPosition is set to absolute, use this attribute to set the X-coordinate of the legend. It accepts absolute or percentage values. By default, its value is set to 0.

Type: Number

Range: 0 to chart width (in pixels)

legendYPosition

When the value of legendPosition is set to absolute, use this attribute to set the Y-coordinate of the legend. It accepts absolute or percentage values. By default, its value is set to 0.

Type: Number

Range: 0 to chart height (in pixels)

legendNumRows

Sets the number of rows the legend should display.

Type: Number

Range:

legendNumColumns

Sets the number of columns the legend should display.

Type: Number

Range:

legendCaptionAlignment

Sets the legend caption horizontal alignment .

Type: String

Range: "left", "center", "right"

legendCaptionFontBold

Whether legend caption should be displayed in bold

Type: Boolean

Range: 0/1

legendCaptionFont

Sets legend caption font

Type: String

Range: Font Name

legendCaptionFontSize

Sets legend caption font size

Type: Number

Range: 6 - 72

legendCaptionFontColor

Sets legend caption font color

Type: Color

Range: Hex Color Code

legendCaption

You can add a caption for the entire legend by setting the same here.

Type: String

Range:  

legendItemHiddenColor

Sets the color that applies on both text font and icon when they are in a disabled / hidden state

Type: Color

Range: Hex Color Code

legendIconScale

Scaling of legend icon is possible in Froala Charts. This attribute lets you control the size of legend icon.

Type: Number

Range: 1-5

legendBgColor

Background color for the legend.

Type: Color

Range: Hex Color Code

legendBgAlpha

Background alpha for the legend.

Type: Number

Range: 0 - 100

legendBorderColor

Border Color for the legend.

Type: Color

Range: Hex Color Code

legendBorderThickness

Border thickness for the legend.

Type: Number

Range: In Pixels

legendBorderAlpha

Border alpha for the legend.

Type: Number

Range: 0 - 100

legendShadow

Whether to show a shadow for legend.

Type: Boolean

Range: 0/1

legendAllowDrag

The legend can be made drag-able by setting this attribute to 1. End viewers of the chart can drag the legend around on the chart.

Type: Boolean

Range: 0/1

legendScrollBgColor

If you've too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the background color of the scroll bar.

Type: Color

Range: Hex Color Code

reverseLegend

You can reverse the ordering of datasets in the legend by setting this attribute to 1.

Type: Boolean

Range: 0/1

legendNumColumns

If your chart contains multiple series, the legend is displayed as a grid comprising of multiple legend keys. With the help of this attribute you can specify the number of columns that are to be displayed in the legend.

Type: Number

Range: Positive Integer

minimiseWrappingInLegend

Whether to minimize legend item text wrapping.

Type: Boolean

Range: 0/1

drawCustomLegendIcon

Specifies whether drawing a custom legend icon will be enabled. All legend icon customization attributes will work only if this feature is enabled.

Default value: 0 (disabled)

Type: Boolean

Range: 0/1

legendIconBorderColor

Sets the border color for the legend icon.

Default value: Data plot border color

Type: Color

Range: Hex Color Code

legendIconBgColor

Sets the background color for the legend icon.

Default value: Data plot fill color

Type: Color

Range: Hex Color Code

legendIconAlpha

Sets the legend icon transparency.

Default value: 100

Type: Number

Range: 0 - 100

legendIconBgAlpha

Sets the legend icon background transparency.

Default value: 100

Type: Number

Range: 0 - 100

legendIconSides

Sets the number of sides for the legend icon.

Default value: 4

Type: Number

Range:

legendIconBorderThickness

Sets the thickness of the legend icon border.

Default value: 1

Type: Number

Range: 1-5

legendIconStartAngle

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

formatNumber

This configuration determines whether the numbers displayed on the chart will be formatted using commas, e.g., 40,000 if 'formatNumber': '1'; and 40000 if 'formatNumber': '0';.

Type: Boolean

Range: 0/1

formatNumberScale

Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it - e.g., if formatNumberScale is set to 1, 1043 will become 1.04K (with decimals set to 2 places). Same with numbers in millions - an M will be added at the end.

Type: Boolean

Range: 0/1

defaultNumberScale

The default unit of the numbers that you're providing to the chart.

Type: String

Range:

numberScaleUnit

Unit of each block of the scale.

Type: String

Range:

numberScaleValue

Range of the various blocks that constitute the scale.

Type: String

Range:

forceNumberScale

If a data value is less than the lowest given number is the number scale, this attribute forces the lower value of the numberScaleUnit to be applied to that data value. This attribute works only when “formatNumberScale”: “1” and the defaultNumberScale attribute is not defined. For example, if “numberScaleUnit”: “K, M”, “numberScaleValue”: “1000, 1000”, and “forceNumberScale”: “1”, a data value of 400 will be rendered as 0.40K.

Type: Boolean

Range: 0/1

scaleRecursively

Whether recursive scaling should be applied.

Type: Boolean

Range: 0/1

maxScaleRecursion

How many recursions to complete during recursive scaling? -1 completes the entire set of recursion.

Type: Number

Range:

scaleSeparator

What character to use to separate the scales that are generated after recursion?

Type: String

Range:

numberPrefix

Using this attribute, you could add prefix to all the numbers visible on the graph. For example, to represent all dollars figure on the chart, you could specify this attribute to $ to show like $40000, $50000.

Type: String

Range: Character

numberSuffix

Using this attribute, you could add a suffix to all the numbers visible on the graph. For example, to represent all figures quantified as per annum on the chart, you could specify this attribute to '/a' to show like 40000/a, 50000/a.

Type: String

Range: Character

decimalSeparator

This attribute helps you specify the character to be used as the decimal separator in a number.

Type: String

Range: Character

thousandSeparator

This attribute helps you specify the character to be used as the thousands separator in a number.

Type: String

Range: Character

thousandSeparatorPosition

This option helps you specify the position of the thousand separator.

Type: Number

Range:  

inDecimalSeparator

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

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 thousand separator.

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

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

showToolTip

Whether to show tool tip on chart.

Type: Boolean

Range: 0/1

toolTipBgColor

Background color for tool tip.

Type: Color

Range: Hex Color Code

toolTipColor

Font color for the tool-tip.

Type: Color

Range: Hex Color Code

toolTipBorderColor

Border color for tool tip.

Type: Color

Range: Hex Color Code

tooltipBorderAlpha

Sets the border transparency for tool tip.

Type: Number

Range: 0 - 100

toolTipSepChar

The character specified as the value of this attribute separates the name and value displayed in tool tip.

Type: String

Range:

showToolTipShadow

Whether to show shadow for tool-tips on the chart.

Type: Boolean

Range: 0/1

toolbarPosition

Where to position the toolbar on the chart: TL - Top-left TR - Top-right BR - Bottom right BL - Bottom left CC - Center of screen

Type: String

Range: TL, TR, BL, BR, CC

toolbarX

Sets the toolbox position on the chart with respect to x-axis.

Type: Number

Range:

toolbarY

Sets the toolbox position on the chart with respect to y-axis.

Type: Number

Range:

toolbarHAlign

Sets the horizontal alignment of the toolbar on the chart.

Type: String

Range: Left, Right

toolbarVAlign

Sets the vertical alignment of the toolbar on the chart

Type: String

Range: Top, Bottom

toolbarButtonColor

Sets the color of the toolbar buttons.

Type: Color

Range: Any (color code without the # prefix)

showToolBarButtonTooltext

Enables/disables display of tooltips for toolbar buttons.

Type: Boolean

Range: 0/1

toolbarButtonScale

You can change the scale of the toolbar by specifying a value for this attribute.

Type: Number

Range:

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'

exportHandler

In case of server side exporting, this refers to the path of the server-side export handler (the ready-to-use scripts that we provide).

Type: String

Range:

exportFormats

Lets you configure what output formats to allow for export of chart, in the export context menu, and also customize the label for each menu item. The attribute value should be a pipe (|) delimited separated key-value pair. Example: exportFormats: 'PNG=Export as High Quality Image|JPG|PDF=Export as PDF File'

Type: String

Range:

exportMode

This attributes sets the modes of export. To enable client-side exporting, set this attribute to client.

Default value: auto.

Note: The exportMode attribute replaces the exportAtClientSide attribute. However, you don’t need to make any changes to the existing setup because, the Froala Charts library comes with the proper mapping already provided.

Type: String

exportShowMenuItem

Whether the menu items related to export (e.g., Save as JPEG etc.) will appear in the context menu of chart.

Type: Boolean

Range: 0/1

exportTargetWindow

In case of server-side exporting and when using download as action, this lefts you configure whether the return image, PDF, SVG or XLSX will open in same window (as an attachment for download), or whether it will open in a new window.

Default value: _self

Type: String

Range: '_self' or '_blank'

exportFileName

Using this attribute you can specify the name (excluding the extension) of the output (export) file.

Type: String

Range:

highlightEffect

This attribute lets you specify whether the link should be highlighted when hovered upon.

Type: Boolean

Range: 0 / 1

nodeHoverAlpha

This attribute lets you set the transparency of the node when hovered over, between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

linkHoverAlpha

This attribute lets you set the transparency of the link when hovered over, between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

plotHighlightEffect

This attribute lets you enable/disable the highlight effect, in the form of a fadeout, for the data plots corresponding to a legend item. When this attribute is enabled and the mouse pointer is hovered over a legend item label, plots belonging to the other data series fadeout, by reducing their opacity. The fadeout effect can be customized by specifying the fadeout color and opacity using the color and alpha attributes. Eg. fadeout|color=#ff0000, alpha=60

Type: String

Range:

captionPadding

This attribute lets you control the space (in pixels) between the sub-caption and top of the chart canvas. If the sub-caption is not defined, it controls the space between caption and top of chart canvas. If neither caption, nor sub-caption is defined, this padding does not come into play.

Type: Number

Range: In Pixels

chartLeftMargin

Amount of empty space that you want to put on the left side of your chart. Nothing is rendered in this space.

Type: Number

Range: In Pixels

chartRightMargin

Amount of empty space that you want to put on the right side of your chart. Nothing is rendered in this space.

Type: Number

Range: In Pixels

chartTopMargin

Amount of empty space that you want to put on the top of your chart. Nothing is rendered in this space.

Type: Number

Range: In Pixels

chartBottomMargin

Amount of empty space that you want to put at the bottom of your chart. Nothing is rendered in this space.

Type: Number

Range: In Pixels

label

This attribute lets you specify the label text for the node. If you omit this, the node will not be displayed.

Type: String

Range:

showLabel

This attribute lets you specify whether or not node label should be displayed.

Default value: 1

Type: Boolean

Range: 0/1

showValue

This attribute lets you specify whether or not node value should be displayed.

Default value: 0

Type: Boolean

Range: 0/1

rotateLabel

This attribute lets you specify whether or not node label should be rotated and displayed.

Default value: 0

Type: Boolean

Range: 0/1

labelPosition

This attribute lets you position the labels with respect to the nodes.

Default value: end

Type: String

Range: start, inside, end

labelFontColor

This attribute lets you set the font color for the node label text.

Type: Color

Range: Hex Color Code

labelAlpha

This attribute lets you set the transparency of the node label between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

Labelbgcolor

This attribute allows you to set the background color of the node label.

Type: Color

Range: Hex Color Code

Labelbordercolor

This attribute allows you to set the color of the node label border.

Type: Color

Range: Hex Color Code

color

This attribute allows you to specify the color of the node.

Type: Color

Range: Hex Color Code

alpha

This attribute lets you set the transparency of the node between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

hoveralpha

This attribute lets you set the transparency of the node when hovered over, between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

from

This attribute lets you specify the id of the from node of a link. This is a mandatory attribute. If you omit this attribute, the link will not be rendered.

Type: String

Range:

to

This attribute lets you specify the id of the to node of a link. This is a mandatory attribute. If you omit this attribute, the link will not be rendered.

Type: String

Range:

value

This attribute lets you set the value of the link. If you set this to 0, the link will not be displayed.

Type: Number

Range:

color

This attribute allows you to specify the color of the link.

Type: Color

Range: Hex Color Code

alpha

This attribute lets you set the transparency of the link between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

hoverAlpha

This attribute lets you set the transparency of the link when hovered over, between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

curvature

This attribute lets you specify whether the link should be drawn straight or curved.

Type: Number

Range: 0 - 1