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<DatasetContext> | boolean - 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. |
borderJoinStyle | JoinStyle | Yes | Arc line join style. The default is JoinStyle.ROUND when borderAlign is BorderAlign.INNER.See MDN. |
borderWidth | int | Yes | Arc stroke width. |
borderRadius | int | Yes | The arc border radius (in pixels). |
circular | boolean | - | If the arc is curved. If false the arc will be flat. |
hoverBackgroundColor | String - IsColor | Yes | Arc fill color when hovered. |
hoverBorderColor | String - IsColor | Yes | Arc stroke color when hovered. |
hoverBorderJoinStyle | JoinStyle | Yes | Arc line join style when hovered. See MDN. |
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 |
borderJoinStyle | JoinStyleCallback<DatasetContext> | JoinStyle |
borderWidth | WidthCallback<DatasetContext> | int |
hoverBackgroundColor | ColorCallback<DatasetContext> | String - IsColor - Pattern - Gradient |
hoverBorderColor | ColorCallback<DatasetContext> | String - IsColor - Gradient |
hoverBorderJoinStyle | JoinStyleCallback<DatasetContext> | JoinStyle |
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. |
base | double | - | Base value for the bar in data units along the value axis. |
borderColor | String - IsColor | Yes | Bar stroke color. See default colors. |
borderRadius | int | Yes | The bar border radius (in pixels). |
borderSkipped | boolean - 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<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
}
});