Skip to main content
Version: 6.2

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:

NameTypeScriptableDescription
backgroundColorString - IsColorYesPoint fill color.
See default colors.
borderColorString - IsColorYesPoint stroke color.
See default colors.
borderWidthintYesPoint stroke width.
hitRadiusintYesExtra radius added to point radius for hit detection.
hoverBackgroundColorString - IsColorYesPoint fill color when hovered.
hoverBorderColorString - IsColorYesPoint stroke color when hovered.
hoverBorderWidthintYesStroke width when hovered.
hoverRadiusintYesPoint radius when hovered.
pointStylePointStyle - Img - CanvasYesPoint style.
radiusintYesPoint radius.
rotationdoubleYesThe 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:

NameCallbackReturned types
backgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
borderColorColorCallback<DatasetContext>String - IsColor - Gradient
borderWidthWidthCallback<DatasetContext>int
hitRadiusRadiusCallback<DatasetContext>double
hoverBackgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
hoverBorderColorColorCallback<DatasetContext>String - IsColor - Gradient
hoverBorderWidthWidthCallback<DatasetContext>int
hoverRadiusRadiusCallback<DatasetContext>double
pointStylePointStyleCallback<DatasetContext>boolean - PointStyle - Img - Canvas
radiusRadiusCallback<DatasetContext>double
rotationRotationCallback<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:

NameTypeScriptableDescription
backgroundColorString - IsColorYesLine fill color.
See default colors.
borderCapStyleCapStyleYesDetermines the shape used to draw the end points of lines.
See MDN.
borderColorString - IsColorYesLine stroke color.
See default colors.
borderDashint[]YesThe 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.
borderDashOffsetdoubleYesLine dash offset.
See MDN.
borderJoinStyleJoinStyleYesThe shape used to join two line segments where they meet.
See MDN.
borderWidthintYesLine stroke width.
capBezierPointsboolean-Set true to keep Bezier control inside the chart, false for no restriction.
cubicInterpolationModeCubicInterpolationModeYesInterpolation mode to apply.
fillString - int - boolean - IsFillYesHow to fill the area under the line.
See Filling modes
hoverBackgroundColorString - IsColorYesLine fill color when hovered.
hoverBorderColorString - IsColorYesLine stroke color when hovered.
hoverBorderWidthintYesStroke width when hovered.
steppedboolean - SteppedYesIf the line is shown as a stepped line.
tensiondouble-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:

NameCallbackReturned types
backgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
borderCapStyleCapStyleCallback<DatasetContext>CapStyle
borderColorColorCallback<DatasetContext>String - IsColor - Gradient
borderDashBorderDashCallback<DatasetContext>List<Integer>
borderDashOffsetBorderDashOffsetCallback<DatasetContext>double
borderJoinStyleJoinStyleCallback<DatasetContext>JoinStyle
borderWidthWidthCallback<DatasetContext>int
cubicInterpolationModeCubicInterpolationModeCallbackCubicInterpolationMode
fillFillCallbackString - int - boolean - IsFill
hoverBackgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
hoverBorderColorColorCallback<DatasetContext>String - IsColor - Gradient
hoverBorderWidthWidthCallback<DatasetContext>int
steppedSteppedCallbackStepped

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:

NameTypeScriptableDescription
angledoubleYesArc angle to cover, for polar chart only.
backgroundColorString - IsColorYesArc fill color.
See default colors.
borderAlignBorderAlignYesArc stroke alignment.
borderColorString - IsColorYesArc stroke color.
borderJoinStyleJoinStyleYesArc line join style. The default is JoinStyle.ROUND when borderAlign is BorderAlign.INNER.
See MDN.
borderWidthintYesArc stroke width.
borderRadiusintYesThe arc border radius (in pixels).
circularboolean-If the arc is curved. If false the arc will be flat.
hoverBackgroundColorString - IsColorYesArc fill color when hovered.
hoverBorderColorString - IsColorYesArc stroke color when hovered.
hoverBorderJoinStyleJoinStyleYesArc line join style when hovered.
See MDN.
hoverBorderWidthintYesStroke width when hovered.
hoverOffsetintYesThe offset of the arc (in pixels) when hovered.
offsetintYesThe offset of the arc (in pixels).
spacingint-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:

NameCallbackReturned types
angleAngleCallbackdouble
backgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
borderAlignBorderAlignCallbackBorderAlign
borderColorColorCallback<DatasetContext>String - IsColor - Gradient
borderRadiusBorderRadiusCallbackint
borderJoinStyleJoinStyleCallback<DatasetContext>JoinStyle
borderWidthWidthCallback<DatasetContext>int
hoverBackgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
hoverBorderColorColorCallback<DatasetContext>String - IsColor - Gradient
hoverBorderJoinStyleJoinStyleCallback<DatasetContext>JoinStyle
hoverBorderWidthWidthCallback<DatasetContext>int
hoverOffsetOffsetCallback<DatasetContext>int
offsetOffsetCallback<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:

NameTypeScriptableDescription
autoInflateAmountboolean-If true, the amount of pixels to inflate the bar rectangles, when drawing, is automatically calculating.
backgroundColorString - IsColorYesBar fill color.
See default colors.
basedouble-Base value for the bar in data units along the value axis.
borderColorString - IsColorYesBar stroke color.
See default colors.
borderRadiusintYesThe bar border radius (in pixels).
borderSkippedboolean - BorderSkippedYesThe edge to skip when drawing bar.
borderWidthintYesThe bar border width (in pixels).
enableBorderRadiusbooleanYesIf true, it only shows the border radius of a bar when the bar is at the end of the stack.
hoverBackgroundColorString - IsColorYesBar fill color when hovered.
hoverBorderColorString - IsColorYesBar stroke color when hovered.
hoverBorderWidthintYesStroke width when hovered.
hoverBorderRadiusintYesThe bar border radius (in pixels) when hovered.
inflateAmountintYesThe amount of pixels to inflate the bar rectangles, when drawing.
pointStylePointStyle - Img - CanvasYesPoint 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:

NameCallbackReturned types
backgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
borderColorColorCallback<DatasetContext>String - IsColor - Gradient
borderSkippedBorderSkippedCallbackBorderSkipped
borderRadiusBorderRadiusCallbackint
borderWidthWidthCallback<DatasetContext>int
enableBorderRadiusEnableBorderRadiusCallbackboolean
hoverBackgroundColorColorCallback<DatasetContext>String - IsColor - Pattern - Gradient
hoverBorderColorColorCallback<DatasetContext>String - IsColor - Gradient
hoverBorderWidthWidthCallback<DatasetContext>int
hoverBorderRadiusBorderRadiusCallbackint
inflateAmountInflateAmountCallbackint(1)
pointStylePointStyleCallback<DatasetContext>boolean - PointStyle - Img - Canvas

(1)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
}
});