Data Plot

Data plot refers to the column in column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart. This section shows how you can enhance the way your data plot looks with the help of colors, gradients and hover effects.

Given below is the list of attributes used to define custom colors for individual data plots:

Attribute Name

Description

color

Sets the data-plot color in hex code, eg. #00ffaa

paletteColors

Specifies custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., "paletteColors" : "#eed17f, #97cbe7, #b0d67a".

Specifying a list of colors for different data series/data plots:

You can also specify a comma separated list of colors for use in different data series (or in case of single series charts, different data plots). The colors are selected from the list in a round-robin way for each data series.

A multi-series 2D chart configured with a comma separated list of colors looks as below:

Given below is the attribute used to specify a comma separated list of colors for coloring data series:

Attribute Name

Description

paletteColors

Specifies custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., "paletteColors" : "#eed17f, #97cbe7, #b0d67a".

Customizing gradient effects for data plots

Adding gradient effect to data plots

You can apply a global gradient color for an entire data plot as described in this sub-section.

The list of attributes used to configure gradient color for data plots is shown below:

Attribute Name

Description

usePlotGradientColor

Set this to 1 to use gradient effect, or to 0 (default) to remove it.

plotGradientColor

You can globally add a gradient color to the entire plot of chart by specifying the second color as this attribute. For example, if you’ve specified individual colors for your columns and now you want a gradient that ends in white, you need to specify #ffffff (white) as the value of this attribute and the chart will now draw plots as gradient.

Customizing gradient properties

Apart from a basic gradient effect, you can also customize the gradient angle, and fill ratio for a data plot. A column 2D chart with customized gradient properties used for data plots looks as below:

Given below is the list of attributes used to configure gradient effects:

Attribute Name

Description

plotFillAngle

Sets the fill angle for gradient (for column, area and pie charts). Values can range from 0 - 360.

plotFillRatio

Specifies the start and end of the gradient effect in a comma separated format. For example a setting of “20, 40” would cause the gradient effect to start at 20% of width and end at 40% of width. The colour before gradient start would be set to the data plot color and after gradient end would get set to the gradient fill color.

Customizing data plot transparency

You can set the transparency of a data plot fill colour. A column 2D chart with data plot transparency property applied looks as below:

Given below is the list of attributes used to customize transparency of a data plot:

Attribute Name

Description

plotFillAlpha

Used to set the transparency of all data plots in chart object. In case of gradients we can provide more than one alpha in a comma separated format. Values ranges from 0 (completely transparent) to 100 (opaque).