Chart Advanced Features: Area

The following sections provide a list of available advanced attributes available for controlling and customizing Area chart elements.

This topic contains documentation for advanced attributes which are third-party customizations that must be manually entered into the chart wizard. These topics were converted directly from the documentation provided by this third-party source. Not every attribute listed may be supported in Exago BI as some unexpected conflicts may occur in their integration within the application.

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.

Chart Message-related Attributes

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

Chart Titles and Axis Names

Using these attributes, you can set the various headings and titles of chart like caption, sub-caption, x-axis and y-axis names etc.

Chart Caption Cosmetics

These attributes let you configure the cosmetics of chart caption and sub-caption.

Chart Axis Configuration Attributes

Using these attributes, you can set and configure x-axis labels, y-axis values and set chart cosmetics for the axis like color, alpha, etc.

x-Axis Name Cosmetics

To configure the font cosmetics of x-axis name (title), you can use the following attributes.

y-Axis Name Cosmetics

To configure the font cosmetics of y-axis name (title), you can use the following attributes.

Chart Cosmetics

The following attributes let you configure chart cosmetics like background color, background alpha, canvas color & alpha etc.

Data Plot Cosmetics

These attributes let you configure how your plot (area in case of Area chart) 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.

Data Value Cosmetics

These attributes let you configure font, background and border cosmetics, of value text-field that appear for each data plot.

Y-Axis Value Cosmetics

These attributes let you configure font, background and border cosmetics, of the Y-axis value text.

Anchors

On area charts, anchors (or marker points) are polygons which appear at the joint of two consecutive line/area points. These are indicators to show the position of data points. The anchors handle tool tips and links for the data points. So, if you opt to not render anchors on a chart, the tool tips and links won’t function. You can, however, hide them by setting alpha to 0 and still enable tool tips and links. In area charts, anchors are set transparent by default. In case you wish to show the anchor, use anchorAlpha=”100″ attribute. You can customize all the facets of anchors using the properties below.

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

Number Formatting

Exago BI offers you a lot of options to format your numbers on the chart. Using the attributes below, you can control a myriad of options like: Formatting of commas and decimals Number prefixes and suffixes Decimal places to which the numbers will round to Scaling of numbers based on a user defined scale Custom number input formats

Font Properties

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 Exago BI. Using Styles, you can also specify advanced font properties like Bold, Italics, HTML Mode etc.

Data Label Cosmetics

These attributes let you configure the cosmetics of all data labels of the chart.

Cross Line Attributes

Using these attributes, you can set and configure cross line and set its cosmetics like color, alpha, etc.

Tool tip Attributes

These attributes let you control the tool tip. You can set the background color, border color, separator character and few other details.

Toolbar Attributes

Using this set of attributes, you can customize the toolbar on the chart. The advantage of having a toolbar is that it manages all the UI action elements (context menus, checkboxes, buttons) centrally. This provides a clean, uniform look and a better, more meaningful and logical grouping.

Attributes for Exporting Charts

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

Data Plot Hover Effects

If you wish to show an effect on the data plot (column, line anchor, pie etc.) when the user hovers his mouse over the data plot, these attributes let you configure the cosmetics of the hover for all data plots in the chart.

Chart Padding & Margins

The following attributes help you control chart margins and padding. Exago BI allows you manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. You can also define the chart margins. Chart Margins refer to the empty space left on the top, bottom, left and right of the chart. That means, Exago BI will not plot anything in that space. It’s not necessary for you to specify any padding/margin values. Exago BI automatically assumes the best values for the same, if you do not specify the same.

The data Object

In single-series charts, each instance of the `data` object represents a data value to be plotted on the chart. For a single-series chart, one instance of the `data` object looks as shown in the example below:

"data"[{
		"label": "Jan",
		"value": "10000"
	}]

Attributes of the `data` object are used to set and configure the data values for the chart.

Vertical Data Separator Lines

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

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

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

Trend-lines

Trend-lines are horizontal lines that aid in interpretation of data with respect to some pre-determined value. For example, if you are plotting the sales data for the current year, you might want to show the previous year’s average monthly sales as a trend indicator for ease of comparison. The `line` object, child of the `trendlines` object is used to add trend-lines to a chart. Although the `line` object has to be defined within the `trendlines` object, the latter cannot be used to collectively customize trend-lines, because it does not have any attributes of its own. The attributes of the `line` object, child of the `trendlines` object, are used to create and customize trend-lines for charts.

Trend-lines (Chart level attributes)

Trend-lines are horizontal lines that aid in interpretation of data with respect to some pre-determined value. For example, if you are plotting the sales data for the current year, you might want to show the previous year’s average monthly sales as a trend indicator for ease of comparison. Cosmetics for all the trend-lines rendered can be attained using this set of attributes. Although there are set of attributes of the `line object`, used to create and customize trend-lines, these set of attributes effect all the trend-lines rendered in your chart.

Trend-lines Display Value Cosmetics

These attributes let you customize the display value set for trend-lines.
Note: These attributes belong to the `chart` object and not to the `line` object (child of the `trendline` object). They are, therefore, applied to all trend-lines on your chart.