Skip to main content
Version: 6.5

Grid

It defines options for the grid lines that run perpendicular to the axis.

All axes are providing the capability to set and get the options, by the set and get methods, as following:

// creates the axis for chart
CartesianLinearAxis axis = new CartesianLinearAxis(chart);
// sets line width to the grid
axis.getGrid().setDisplay(true);

boolean display = axis.getGrid().isDisplay();

Table with options:

NameTypeScriptableDescription
circularboolean-If true, grid lines are circular (on radar chart only).
colorString - String[] - IsColor - IsColor[]YesThe color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
See default colors.
displayboolean-If false, do not display grid lines for this axis.
drawOnChartAreaboolean-If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
drawTicksboolean-If true, draw lines beside the ticks in the axis area beside the chart.
lineWidthint - int[]YesStroke width of grid lines.
offsetboolean-If true, grid lines will be shifted to be between labels. This is set to true in the bar chart by default.
tickBorderDashint[]YesLength and spacing of the tick mark line. If not set, defaults to the grid line borderDash value.
tickBorderDashOffsetdouble - double[]-Offset for the line dash of the tick mark. If unset, defaults to the grid line borderDashOffset value
tickColorString - String[] - IsColor - IsColor[]YesColor of the tick line. If unset, defaults to the grid line color.
tickLengthint-Length in pixels that the grid lines will draw in the axis area.
tickWidthint - int[]YesWidth of the tick mark in pixels. If unset, defaults to the grid line lineWidth.
zint-The z-index of gridline layer. Values less than or equals to 0 are drawn under data sets, greater than 0 on top.

Scriptable

Scriptable options at grid level accept a callback which is called for each of the underlying data values. See more details in Configuring charts section.

All scriptable options callbacks will get a ScaleContext instance.

// creates the axis for chart
CartesianLinearAxis axis = new CartesianLinearAxis(chart);
// sets the option by a callback
axis.getGrid().setColor(new ColorCallback<ScaleContext>(){

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

The following options can be set by a callback:

NameCallbackReturned types
colorColorCallback<ScaleContext>String - IsColor
lineWidthWidthCallback<ScaleContext>int
tickBorderDashBorderDashOffsetCallback<ScaleContext>double
tickColorColorCallback<ScaleContext>String - IsColor
tickWidthWidthCallback<ScaleContext>int

Border

The border defines options for the border that run perpendicular to the axis.

// creates the axis for chart
CartesianLinearAxis axis = new CartesianLinearAxis(chart);
// sets color to the grid
axis.getBorder().setDisplay(true);
axis.getBorder().setColor(HtmlColor.RED);

boolean display = axis.getBorder().isDisplay();

The following are the attributes that you can set:

NameTypeScriptableDescription
displayboolean-If true, draw border at the edge between the axis and the chart area.
colorString - IsColor-If set, used as the color of the border line.
dashint[]YesLength and spacing of dashes on grid lines. See MDN.
dashOffsetdoubleYesOffset for line dashes. See MDN.
widthint-If set, used as the width of the border line.
zint-z-index of the border layer. Values less than or equals to 0 are drawn under datasets, greater than 0 on top.

Border scriptable

Scriptable options at grid level accept a callback which is called for each of the underlying data values. See more details in Configuring charts section.

All scriptable options callbacks will get a ScaleContext instance.

// creates the axis for chart
CartesianLinearAxis axis = new CartesianLinearAxis(chart);
// sets the option by a callback
axis.getBorder().setDashOffset(new BorderDashOffsetCallback<ScaleContext>(){

@Override
public int invoke(ScaleContext context){
// logic
return dashOffset;
}
});

The following options can be set by a callback:

NameCallbackReturned types
dashBorderDashCallback<ScaleContext>List<Integer>
dashOffsetBorderDashOffsetCallback<ScaleContext>double