What are the range padding options available in JavaScript Chart?

Essential Chart supports different types of RangePadding options to avoid partial appearance of point and data labels near the left and right edges of the Chart area. The different types of padding options for the axis in Essential Chart are described as follows.

None

Axis range is calculated from the minimum value to the maximum value in DataSource.  None is the default value for the range padding.

JS

            $("#container").ejChart({
                primaryXAxis: {
                    rangePadding: 'none'
                }
                . . . . . . . . .
            });

The screenshot displays the Chart with the range padding set to None.

Figure 1: Range padding set to None

Normal

Axis range is calculated based on the numeric nice interval range calculation. This is applicable for numerical axis alone and is specifically used for Y-Axis in the Chart.

JS

            $("#container").ejChart({
                primaryXAxis: {
                    rangePadding: 'normal'
                }
                . . . . . . . . . .
            });

The following screenshot displays the Chart with the range padding set to Normal.

Figure 2: Range padding set to Normal

Additional

Axis range is calculated by adding the intervals to minimum and maximum values in the DataSource such that points near the left and right edges appear without getting cut.

JS

            $("#container").ejChart({
                primaryXAxis: {
                    rangePadding: 'additional'
                }
                . . . . . . . . . . . . 
            });

The following screenshot displays the Chart with the range padding set to Additional.

Figure 3: Range padding set to Additional

Round

This rounds the axis range to the nearest possible value.

JS

            $("#container").ejChart({
                primaryXAxis: {
                    rangePadding: 'round'
                }
                . . . . . . . .
            });

The following screenshot displays the Chart with the range padding set to Round.

Figure 4: Range padding set to Round

JS Playground sample link: Range padding