Zero Plane

Zero plane is a plane separating the positive and negative numbers on the y-axis of a chart. It is rendered by default in any chart that plots both negative and positive values.

The zero plane applies to column, line, scatter, bubble and the area charts. Additionally, scatter and bubble charts also support vertical zero plane on the x-axis.

Show/Hide the Zero Plane

By default, the zero plane is rendered in any chart that plots both negative and positive values. To hide the zero plane, set the showZeroPlane attribute to 0.

Refer to the code below:

{
    "chart": {
        "showZeroPlane": "1"
    }
}

The chart will look like as shown below:

Click here to edit the above chart.

Customize Zero Plane in 2D chart

To customize the zero plane in a 2D chart, the following attributes are used:

• Specify the hex code for the color of the zero plane using the zeroPlaneColor attribute.

• Set the thickness (in pixels) of the zero plane using the zeroPlaneThickness attribute.

• Set the transparency of the zero plane using the zeroPlaneAplha attribute.

Refer to the code below:

{
    "chart": {
        ...
        "showZeroPlane": "1",
        "zeroPlaneColor": "#003366",
        "zeroPlaneAlpha": "100",
        "zeroPlaneThickness": "3"
    }
}

The chart will look like as shown below:

Click here to edit the above chart.

Customize Zero Plane in 3D chart

To customize the zero plane in a 3D chart, the following attributes are used:

• Specify the hex code for the color of the zero plane using the zeroPlaneColor attribute.

• Set the transparency of the zero plane using the zeroPlaneAplha attribute.

• Set the zeroPlaneShowBorder attribute to 1 to display the border.

• Specify the hex code of the border color using the zeroPlaneBorderColor attribute.

Refer to the code below:

{
    "chart": {
        ...
        "showZeroPlane": "1",
        "zeroPlaneColor": "#99ccff",
        "zeroPlaneAlpha": "100",
        "zeroPlaneShowBorder": "1",
        "zeroPlaneBorderColor": "1"
    }
}

The chart will look like as shown below:

Click here to edit the above chart.

Vertical Zero Plane

In case of XY plot charts, zero plane appears vertically at zero x-position on canvas, when negative data is being shown on the chart.

To hide the vertical zero plane set the showVZeroPlane attribute to 0. Refer to the code below:

{
    "chart": {
        "showVZeroPlane": "0"       
    }
}

The chart will look like as shown below:

Click here to edit the above chart.

To configure the vertical zero plane use the following attributes:

• Specify the hex code of the color for the vertical zero plane using the vZeroPlaneColor attribute.

• Set the thickness (in pixels) of the vertical zero plane using the vZeroPlaneThickness attribute.

• Set the transparency of the vertical zero plane using the vZeroPlaneAlpha attribute.

Refer to the code below:

{
    "chart": {
        "showVZeroPlane": "1",
        "vZeroPlaneColor": "#cc3300",
        "vZeroPlaneThickness": "3",
        "vZeroPlaneAlpha": "90"
    }
}

The chart will look like as shown below:

Click here to edit the above chart.

Show/Hide the Zero Plane Value

By default, the data value (0) where the zero plane exists on the y-axis is displayed. To hide the zero plane value set the showZeroPlaneValue attribute to '0'.

Refer to the code below:

{
    "chart": {
        "showZeroPlaneValue": "0"
    }
}

The chart will look like as shown below:

Click here to edit the above chart.

In dual y-axis charts, showPZeroPlaneValue (primary y-axis) and showSZeroPlaneValue (secondary y-axis) attributes are used to hide the zero plane values for the primary and secondary axis respectively.

Refer to the code below:

{
    "chart": {
        "showPZeroPlaneValue": "0",
        "showSZeroPlaneValue": "0"
    }
}

The chart will look as shown below:

Click here to edit the above chart.