Elements

The elements allows the user to configure the different type of shapes which are used to draw the datasets.

Options can be configured for four different types of elements: arc, lines, points, and bar.

The elements configuration is nested in the global configuration as following:

// gets elements node
Elements elements = chart.getOptions().getElements();

Point

Point element is used to represent the points in a line chart or a bubble chart.

To get, change and apply own properties, you can invoke the set and get methods, as following:

// sets and gets border width and background color for the point
chart.getOptions().getElements().getPoint().setBorderWidth(2);
chart.getOptions().getElements().getPoint().setBackgroundColor("red");

int borderWidth = chart.getOptions().getElements().getPoint().getBorderWidth();
IsColor backgroundColor = chart.getOptions().getElements().getPoint().getBackgroundColor();

The defaults values are set in global defaults options, see default global elements point options.

The following are the attributes that you can set:

Name	Type	Scriptable	Description
backgroundColor	String - IsColor	Yes	Point fill color. See default colors.
borderColor	String - IsColor	Yes	Point stroke color. See default colors.
borderWidth	int	Yes	Point stroke width.
hitRadius	int	Yes	Extra radius added to point radius for hit detection.
hoverBackgroundColor	String - IsColor	Yes	Point fill color when hovered.
hoverBorderColor	String - IsColor	Yes	Point stroke color when hovered.
hoverBorderWidth	int	Yes	Stroke width when hovered.
hoverRadius	int	Yes	Point radius when hovered.
pointStyle	PointStyle - Img - Canvas	Yes	Point style.
radius	int	Yes	Point radius.
rotation	double	Yes	The point rotation (in degrees).

Point scriptable options

Scriptable options at point element level accept a callback which is called for each of the underlying data values. See more details in scriptable options section.

// gets point element configuration instance
Point point = chart.getOptions().getElements().getPoint();
// sets the option by a callback 
point.setBackgroundColor(new ColorCallback<DatasetContext>(){

   @Override
   public IsColor invoke(DatasetContext context){
      // logic
      return color;
   }
});

The following options can be set by a callback:

Name	Callback	Returned types
backgroundColor	ColorCallback<DatasetContext>	String - IsColor - Pattern - Gradient
borderColor	ColorCallback<DatasetContext>	String - IsColor - Gradient
borderWidth	WidthCallback<DatasetContext>	int
hitRadius	RadiusCallback<DatasetContext>	double
hoverBackgroundColor	ColorCallback<DatasetContext>	String - IsColor - Pattern - Gradient
hoverBorderColor	ColorCallback<DatasetContext>	String - IsColor - Gradient
hoverBorderWidth	WidthCallback<DatasetContext>	int
hoverRadius	RadiusCallback<DatasetContext>	double
pointStyle	PointStyleCallback	PointStyle - Img - Canvas
radius	RadiusCallback<DatasetContext>	double
rotation	RotationCallback<DatasetContext>	double

Line

Line element is used to represent the line in a line chart.

To get, change and apply own properties, you can invoke the set and get methods, as following:

// sets and gets border width and background color for the line
chart.getOptions().getElements().getLine().setBorderWidth(5);
chart.getOptions().getElements().getLine().setBackgroundColor("red");

int borderWidth = chart.getOptions().getElements().getLine().getBorderWidth();
IsColor backgroundColor = chart.getOptions().getElements().getLine().getBackgroundColor();

The defaults values are set in global defaults options, see default global elements line options.

The following are the attributes that you can set:

Name	Type	Scriptable	Description
backgroundColor	String - IsColor	Yes	Line fill color. See default colors.
borderCapStyle	CapStyle	Yes	Determines the shape used to draw the end points of lines. See MDN.
borderColor	String - IsColor	Yes	Line stroke color. See default colors.
borderDash	int[]	Yes	The line dash pattern used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern. See MDN.
borderDashOffset	double	Yes	Line dash offset. See MDN.
borderJoinStyle	JoinStyle	Yes	The shape used to join two line segments where they meet. See MDN.
borderWidth	int	Yes	Line stroke width.
capBezierPoints	boolean	-	Set true to keep Bezier control inside the chart, false for no restriction.
cubicInterpolationMode	CubicInterpolationMode	Yes	Interpolation mode to apply.
fill	String - int - boolean - IsFill	Yes	How to fill the area under the line. See Filling modes
hoverBackgroundColor	String - IsColor	Yes	Line fill color when hovered.
hoverBorderColor	String - IsColor	Yes	Line stroke color when hovered.
hoverBorderWidth	int	Yes	Stroke width when hovered.
stepped	boolean - Stepped	Yes	If the line is shown as a stepped line.
tension	double	-	Bezier curve tension (0 for no Bezier curves).

Line scriptable options

Scriptable options at line element level accept a callback which is called for each of the underlying data values. See more details in scriptable options section.

// gets line element configuration instance
Line line = chart.getOptions().getElements().getLine();
// sets the option by a callback 
line.setBackgroundColor(new ColorCallback<DatasetContext>(){

   @Override
   public IsColor invoke(DatasetContext context){
      // logic
      return color;
   }
});

The following options can be set by a callback:

Name	Callback	Returned types
backgroundColor	ColorCallback<DatasetContext>	String - IsColor - Pattern - Gradient
borderCapStyle	CapStyleCallback<DatasetContext>	CapStyle
borderColor	ColorCallback<DatasetContext>	String - IsColor - Gradient
borderDash	BorderDashCallback<DatasetContext>	List<Integer>
borderDashOffset	BorderDashOffsetCallback<DatasetContext>	double
borderJoinStyle	JoinStyleCallback<DatasetContext>	JoinStyle
borderWidth	WidthCallback<DatasetContext>	int
cubicInterpolationMode	CubicInterpolationModeCallback	CubicInterpolationMode
fill	FillCallback	String - int - boolean - IsFill
hoverBackgroundColor	ColorCallback<DatasetContext>	String - IsColor - Pattern - Gradient
hoverBorderColor	ColorCallback<DatasetContext>	String - IsColor - Gradient
hoverBorderWidth	WidthCallback<DatasetContext>	int
stepped	SteppedCallback	Stepped

Arc

Arc element is used in the polar area, doughnut and pie charts.

To get, change and apply own properties, you can invoke the set and get methods, as following:

// sets and gets border width and background color for the arc
chart.getOptions().getElements().getArc().setBorderWidth(5);
chart.getOptions().getElements().getArc().setBackgroundColor(HtmlColor.RED);

int borderWidth = chart.getOptions().getElements().getArc().getBorderWidth();
IsColor backgroundColor = chart.getOptions().getElements().getArc().getBackgroundColor();

The defaults values are set in global defaults options, see default global elements arc options.

The following are the attributes that you can set:

Name	Type	Scriptable	Description
angle	double	Yes	Arc angle to cover, for polar chart only.
backgroundColor	String - IsColor	Yes	Arc fill color. See default colors.
borderAlign	BorderAlign	Yes	Arc stroke alignment.
borderColor	String - IsColor	Yes	Arc stroke color.
borderWidth	int	Yes	Arc stroke width.
borderRadius	int	Yes	The arc border radius (in pixels).
hoverBackgroundColor	String - IsColor	Yes	Arc fill color when hovered.
hoverBorderColor	String - IsColor	Yes	Arc stroke color when hovered.
hoverBorderWidth	int	Yes	Stroke width when hovered.
hoverOffset	int	Yes	The offset of the arc (in pixels) when hovered.
offset	int	Yes	The offset of the arc (in pixels).
spacing	int	-	Fixed arc offset (in pixels). Similar to offset but applies to all arcs.

Arc scriptable options

Scriptable options at arc element level accept a callback which is called for each of the underlying data values. See more details in scriptable options section.

// gets arc element configuration instance
Arc arc = chart.getOptions().getElements().getArc();
// sets the option by a callback 
arc.setBackgroundColor(new ColorCallback<DatasetContext>(){

   @Override
   public IsColor invoke(DatasetContext context){
      // logic
      return color;
   }
});

The following options can be set by a callback:

Name	Callback	Returned types
angle	AngleCallback	double
backgroundColor	ColorCallback<DatasetContext>	String - IsColor - Pattern - Gradient
borderAlign	BorderAlignCallback	BorderAlign
borderColor	ColorCallback<DatasetContext>	String - IsColor - Gradient
borderRadius	BorderRadiusCallback	int
borderWidth	WidthCallback<DatasetContext>	int
hoverBackgroundColor	ColorCallback<DatasetContext>	String - IsColor - Pattern - Gradient
hoverBorderColor	ColorCallback<DatasetContext>	String - IsColor - Gradient
hoverBorderWidth	WidthCallback<DatasetContext>	int
hoverOffset	OffsetCallback<DatasetContext>	int
offset	OffsetCallback<DatasetContext>	int

Bar

Bar element is used to represent the bars in a bar chart.

To get, change and apply own properties, you can invoke the set and get methods, as following:

// sets and gets border width and background color for the bar
chart.getOptions().getElements().getBar().setBorderWidth(5);
chart.getOptions().getElements().getBar().setBackgroundColor(HtmlColor.RED);

int borderWidth = chart.getOptions().getElements().getBar().getBorderWidth();
IsColor backgroundColor = chart.getOptions().getElements().getBar().getBackgroundColor();

The defaults values are set in global defaults options, see default global elements arc options.

The following are the attributes that you can set:

Name	Type	Scriptable	Description
autoInflateAmount	boolean	-	If true, the amount of pixels to inflate the bar rectangles, when drawing, is automatically calculating.
backgroundColor	String - IsColor	Yes	Bar fill color. See default colors.
borderColor	String - IsColor	Yes	Bar stroke color. See default colors.
borderRadius	int	Yes	The bar border radius (in pixels).
borderSkipped	BorderSkipped	Yes	The edge to skip when drawing bar.
borderWidth	int	Yes	The bar border width (in pixels).
enableBorderRadius	boolean	Yes	If true, it only shows the border radius of a bar when the bar is at the end of the stack.
hoverBackgroundColor	String - IsColor	Yes	Bar fill color when hovered.
hoverBorderColor	String - IsColor	Yes	Bar stroke color when hovered.
hoverBorderWidth	int	Yes	Stroke width when hovered.
hoverBorderRadius	int	Yes	The bar border radius (in pixels) when hovered.
inflateAmount	int	Yes	The amount of pixels to inflate the bar rectangles, when drawing.
pointStyle	PointStyle - Img - Canvas	Yes	Point style for legend.

Bar scriptable options

Scriptable options at bar element level accept a callback which is called for each of the underlying data values. See more details in scriptable options section.

// gets bar element configuration instance
Bar bar = chart.getOptions().getElements().getBar();
// sets the option by a callback 
bar.setBackgroundColor(new ColorCallback<DatasetContext>(){

   @Override
   public IsColor invoke(DatasetContext context){
      // logic
      return color;
   }
});

The following options can be set by a callback:

Name	Callback	Returned types
backgroundColor	ColorCallback<DatasetContext>	String - IsColor - Pattern - Gradient
borderColor	ColorCallback<DatasetContext>	String - IsColor - Gradient
borderSkipped	BorderSkippedCallback	BorderSkipped
borderRadius	BorderRadiusCallback	int
borderWidth	WidthCallback<DatasetContext>	int
enableBorderRadius	EnableBorderRadiusCallback	boolean
hoverBackgroundColor	ColorCallback<DatasetContext>	String - IsColor - Pattern - Gradient
hoverBorderColor	ColorCallback<DatasetContext>	String - IsColor - Gradient
hoverBorderWidth	WidthCallback<DatasetContext>	int
hoverBorderRadius	BorderRadiusCallback	int
inflateAmount	InflateAmountCallback	int(1)
pointStyle	PointStyleCallback	PointStyle - Img - Canvas

⁽¹⁾To enable autoInflateAmount by the inflate amount callback, the value to return must be Undefined.INTEGER.

Bar bar = chart.getOptions().getElements().getBar();
// sets the option by a callback 
bar.setInflateAmount(new InflateAmountCallback(){

   @Override
   public int invoke(DatasetContext context){
      // logic
      return Undefined.INTEGER; // auto inflate amount
   }
});