Chord Chart Attributes

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'

highlightEffect

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

Type: Boolean

Range: 0 / 1

mode

This attribute lets you show the two phases (pre and post) of data flow.

Default value: post

Type: String

Range: pre / post

linkColorByDominance

This attribute lets you specify whether or not links should inherit the color of the dominant node connected to them.

Default value: 1

Type: Boolean

Range: 0 / 1

enableToggle

This attribute lets you specify whether or not clicking on a node should disable it.

Default value: 1

Type: Boolean

Range: 0 / 1

chordRadius

This attribute lets you specify the radius of the Chord Diagram in percentage value.

Type: Number

Range:

startingAngle

This attribute lets you set the starting angle of a Chord Diagram in degree.

Default value: 0

Type: Number

Range: 0 - 360

totalAngle

This attribute lets you set the total angle of a Chord Diagram in degree.

Type: Number

Range: 0 - 360

unfocussedAlpha

This attribute lets you set the transparency of un-hovered nodes and links when one node/link is hovered over, between 0 for transparent and 100 for opaque.

Type: Number

Range: 0 - 100

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

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

showNodeLabels

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

Default value: 1

Type: Boolean

Range: 0 / 1

nodeLabelPosition

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

Default value: tangential

Type: String

Range: inside, outside, tangential

nodeThickness

This attribute lets you set the thickness of a node.

Type: Number

Range:

nodeHoverAlpha

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

Type: Number

Range: 0 - 100

showNodeBorder

This attribute lets you set whether or not the border of a node should be visible.

Default value: 1

Type: Boolean

Range: 0 / 1

minNodeSize

This attribute lets you set the percentage of the total circumference that should be provided to disabled nodes.

Type: Number

Range: 0 - 1

nodeBorderDashed

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

nodeBorderDashedLen

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 nodeBorderDashed attribute is set to 1.

Type: Number

Range: In pixels

nodeBorderDashedGap

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 nodeBorderDashed attribute is set to 1.

Type: Number

Range: In pixels

nodeBorderColor

This attribute allows you to assign a custom color to a node border. By default, the node border is assigned a darker shade of the node color.

Type: Color

Range: Hex Color Code

nodeBorderThickness

This attribute lets you set the thickness of the node border.

Default value: 1

Type: Number

Range: In pixels

nodeBorderAlpha

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

Type: Number

Range: 0 - 100

nodeSpacing

This attribute lets you set the spacing between the two nodes. It is not applicable is nodeRelaxation is enabled.

Type: Number

Range: In pixels

nodeAlpha

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

Type: Number

Range: 0 - 100

nodeLinkPadding

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

Type: Number

Range: In Pixels

nodeLabelFont

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

Type: String

Range: Font Name

nodeLabelColor

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

Type: Color

Range: Hex Color Code

nodeLabelFontSize

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

Type: Number

Range: 0 - 72

linkHoverAlpha

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

Type: Number

Range: 0 - 100

showLinkBorder

This attribute lets you set whether or not the border of a link should be visible.

Default value: 1

Type: Boolean

Range: 0 / 1

linkBorderThickness

This attribute lets you set the thickness of the link border.

Type: Number

Range: In pixels

showLegend

Whether to show legend on the chart.

Type: Boolean

Range: 0/1

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:

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

plottooltext

Specify custom text for the tooltip You can either specify a constant string as the tooltip text or you can use variable values from the data level by prefixing a $ to the attribute name, for example, $name, $value.

Type: String

Range:

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:

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

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

showLabel

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

Default value: 1

Type: Boolean

Range: 0/1

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