Scatter 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

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 y-axis of the chart.

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

Lets you control the transparency of the quadrant lines.

Type: Number

Range: 0 - 100

quadrantLineDashed

Whether the quadrant line should be rendered as dashed lines.

lineColor lineThickness lineAlpha lineDashed lineDashLen lineDashGap

These attributes let you configure how your plot (columns, lines, area, pie or any data that you're plotting) will appear on the chart. If the plots can show borders, you can control the border properties using the attributes listed below. Or, if they support gradient fills, you can again configure various properties of the gradient using these attributes. Various other controls over plot cosmetics can be attained using this set of attributes.

lineColor

Color using which the lines on the chart will be drawn.

Type: Color

Range: Hex Color Code

lineThickness

Thickness of the lines on the chart.

Type: Number

Range: In Pixels

lineAlpha

Alpha of the lines on the chart.

Type: Number

Range: 0 - 100

lineDashed

Whether the lines should be rendered as dashed lines.

Default value: 0 (lines rendered using straight lines)

Type: Boolean

Range: 0/1

lineDashLen

Sets the length of each dash when lines are rendered as dashed lines.

Type: Number

Range: In pixels

lineDashGap

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

Type: Number

Range: In pixels

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

anchorImageUrl

If you want to use an external image (JPG/PNG) as an anchor, this attribute lets you specify the URL.

Note: Due to cross domain security restrictions it is advised to use an image from the same domain name as your charts.

Type: Froala Charts Link format

Range: URL

anchorImageAlpha

This attribute allows to set a transparency for images displayed as anchors in charts.

Default value: 100

Type: Number

Range: 0 - 100

anchorImageScale

This attribute allows to set a scale for magnifying images displayed as anchors.

Default value: 100

Type: Number

Range: 0 - 100

anchorImagePadding

This attribute sets the padding between the anchor image and the border of the anchor. For the anchor image, instead of decreasing the size of the image this attribute crops the image.

Default value: 1

Type: Number

Range: In Pixels

Divisional Lines & Grids

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.

Type: Number

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

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

This attribute sets the base font color 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 color provided here.

Type: Color

Range: Hex Color Code

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

Default value: 0 (border rendered using straight lines)

Type: Boolean

Range: 0/1

labelBorderDashLen

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

Type: Number

Range: In pixels

labelBorderDashGap

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

Type: Number

Range: In pixels

labelLink

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'

This attribute sets the starting angle of the anchors when hovered.

Type: Number

Range: In pixels

anchorHoverDip

This attribute adds a dip effect (different shapes) to the anchors on hover. When hovered a star shaped anchor is created. Using anchorSides attribute, you can specify the no. of sides for anchors.

Note : If the anchors are of circular shape, this attribute won't be applied on it.

Type: Number

Range: 0 - 1

anchorHoverAnimation

Anchors get animated when the normal radius and the hover radius are different. To disable this effect you can set anchorHoverAnimation = 0.

Default value: 1

Type: Boolean

font fontColor fontSize verticalLineAlpha verticalLineColor verticalLineDashed verticalLineDashLen verticalLineDashGap verticalLineThickness

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

verticalLineAlpha

Lets you set the alpha for category lines.

Type: Number

Range: 0 - 100

verticalLineColor

In the bubble/scatter chart, you can opt to show vertical lines for each category label. This attribute lets you set the color for all of them.

Type: Color

Range: Hex Color Code

verticalLineDashed

Whether the vertical lines should be rendered as dashed lines.

Default value: 0 (trendline rendered using straight lines)

Type: Boolean

Range: 0/1

verticalLineDashLen

Sets the length of each dash when vertical lines are rendered as dashed lines.

Type: Number

Range: In Pixels

verticalLineDashGap

Sets the gap between consecutive dashes when vertical lines are rendered as dashed lines.

Type: Number

Range: In Pixels

verticalLineThickness

Lets you set the thickness for category lines.

Type: Number

Range: In Pixels

The category Object

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

label

This attribute determines the label for the data item. The label appears on the x-axis of chart.

Note: The label attribute replaces the name attribute. Previously, either one of the attributes could be used to set the label. Support for the name attribute has been discontinued.

Type: String

Range:

lineDashed

borderThickness

Sets the x-axis label border thickness.

Type: Number

Range: In Pixels

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

This attribute sets the starting angle for anchors of particular dataset.

anchorHoverStartAngle

This attribute sets the starting angle of anchors when hovered of a particular dataset.

Type: Number

Range: In pixels

anchorHoverDip

This attribute adds a dip effect (different shapes) to anchors of a particular dataset on hover. When hovered a star shaped anchor is created. Using anchorSides attribute, you can specify the no. of sides for anchors.

Note : If the anchors are of circular shape, this attribute won't be applied on it.

Type: Number

Range: 0 - 1

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": [{
			"x": "23", 
			"y": "3160" 
		},
		{
			"x": "24", 
			"y": "3000"
		},
		{
			"x": "24", 
			"y": "3080"
		},
		{
			"x": "25", 
			"y": "3680"
		}]
}]

anchorHoverDip

This attribute adds a dip effect (different shapes) to a particular anchor on hover. When hovered a star shaped anchor is created. Using anchorSides attribute, you can specify the no. of sides for anchors.

Note : If the anchors are of circular shape, this attribute won't be applied on it.

Type: Number

Range: 0 - 1

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

valueOnRight

Whether to show the trend line value on left side or right side of chart. This is particularly useful when the trend line display values on the chart are colliding with divisional lines values on the chart.

Type: Boolean

Range: 0/1

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

Vertical Trend-lines

startValue endValue displayValue color isTrendZone thickness alpha dashed dashLen dashGap toolText

Vertical trend lines help you create vertical trend-lines/zones on scatter charts. These are vertical lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value. To add a vertical trend-line to a chart, the vTrendlines and line (child of the vTrendlines object) objects are used as shown in the example below:


"vTRendlines"[{
	"line": [{
		"startValue": "20000",
		"endValue": "3000",
		"isTrendZone": "1",
		"color": "#aaaaaa", 
		"alpha": "14"
		}]
	}]

You can control the cosmetic and functional properties of vertical trend-lines using the following attributes:

startValue

The starting value for the trendline. Say, if you want to plot a slanted trendline from value 102 to 109, the startValue will be 102.

Type: Number

Range: Numeric Value

endValue

Type: Number

Range: Numeric Value

displayValue

Type: String

Range:

color

Color of the trend line and its associated text

Type: String

Range: Hex Color Code

isTrendZone

Whether the trend will be displayed as a line or a zone (fill-colored rectangle).

Type: Boolean

Range: 0/1

thickness

If you've opted to show the trend as a line, this attribute lets you define the thickness of trend line.

Type: Number

Range: In Pixels

alpha

Alpha of the trend line.

Type: Number

Range: 0 - 100

dashed

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:

Scatter Chart Attributes

Functional Attributes

animation

animationDuration

palette

paletteColors

showLabels

maxLabelHeight

labelDisplay

useEllipsesWhenOverflow

rotateLabels

slantLabels

labelStep

staggerLines

showValues

rotateValues

showLimits

showVLimits

showDivLineValues

showVDivLineValues

adjustDiv

adjustVDiv

clickURL

clickURLOverridesPlotLinks

setAdaptiveYMin

setAdaptiveXMin

showRegressionLine

showYOnX

regressionLineColor

regressionLineThickness

regressionLineAlpha

drawLines

hasRTLText

plotHighlightEffect

showPrintMenuItem

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