Loading

Outliers are values that are numerically distant from the set of numbers provided. They are indicative values which may occur by chance or by error for any set of data provided. Outliers are not included in the statistical calculation of the five summary numbers - the minimum and maximum values, the median value, and the lower and upper quartile values. Instead, they are placed as separate points on the chart.

In this section, you will be shown how you can:

  • Customize the outlier icon

  • Show outliers beyond the range of the y-axis

Customizing the Outlier Icon

A box and whisker chart with outliers looks like this:

FusionCharts will load here..

In the above chart, outlier values are displayed as triangle icons above each data plot.

Given below is a brief description of the attributes used to customize the outlier icon:

Attribute Name Description

outliers

It is used to specify the outliers or the values greater than the maximum value from the data set provided. This attribute belongs to the data object, which in turn belongs to the dataset object.

outlierIconShape

It is used to specify the shape for the outlier icon. This attribute can take one of the following two values: polygon or spoke. The default shape for the outlier icon is the triangle-a polygon with three sides.

outlierIconRadius

It is used to specify the radius, in pixels, for the outlier icon.

outlierIconSides

It is used to specify the number of sides for the outlier icon. The default value of this attribute is 3.

outlierIconColor

It is used to specify the hex code of the color that will be used to render the outlier icon in the legend.

outlierIconAlpha

It is used to specify the transparency for the outlier icon. This attribute takes values between 0 (transparent) and 100 (opaque).

The data structure needed to render a box and whisker chart with outliers is given below:

{ "chart": { "caption": "Distribution of annual salaries", "subcaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "$", "theme": "fint", "showValues": "0", "showAllOutliers ": "1" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerboxcolor": "#008ee4", "upperboxcolor": "#6baa01", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000", "outliers": "16900" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500", "outliers": "23000" }, { "value": "15000,19000,25000,32000,50000,65000", "outliers": "72000" } ] }, { "seriesname": "Female", "lowerboxcolor": "#e44a00", "upperboxcolor": "#f8bd19", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000", "outliers": "12000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000", "outliers": "25000" }, { "value": "24000,32000,35000,37000,39000, 58000", "outliers": "71000" } ] } ] }
{
    "chart": {
        "caption": "Distribution of annual salaries",
        "subcaption": "By Gender",
        "xAxisName": "Pay Grades",
        "YAxisName": "Salaries (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "showValues": "0",
        "showAllOutliers ": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerboxcolor": "#008ee4",
            "upperboxcolor": "#6baa01",
            "data": [
                {
                    "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000",
                    "outliers": "16900"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
                    "outliers": "23000"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000",
                    "outliers": "72000"
                }
            ]
        },
        {
            "seriesname": "Female",
            "lowerboxcolor": "#e44a00",
            "upperboxcolor": "#f8bd19",
            "data": [
                {
                    "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
                    "outliers": "12000"
                },
                {
                    "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
                    "outliers": "25000"
                },
                {
                    "value": "24000,32000,35000,37000,39000, 58000",
                    "outliers": "71000"
                }
            ]
        }
    ]
}

Showing Outliers Beyond the Range of the Y-axis

For the chart shown above, all outliers provided as values to the outliers attribute are in the range of the y-axis scale. However, there can be instances where the outlier values lie outside the range of the y-axis. In this case, by default, such outlier values are not shown on the chart to maintain the visual integrity of the data plots.

A box and whisker chart with outliers beyond the range of the y-axis hidden looks like this:

FusionCharts will load here..

The data structure needed to render the above chart is given below:

{ "chart": { "caption": "Distribution of annual salaries", "subcaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "$", "theme": "fint", "showValues": "0" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerboxcolor": "#008ee4", "upperboxcolor": "#6baa01", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000", "outliers": "16900" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500", "outliers": "23000" }, { "value": "15000,19000,25000,32000,50000,65000", "outliers": "72000" } ] }, { "seriesname": "Female", "lowerboxcolor": "#e44a00", "upperboxcolor": "#f8bd19", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000", "outliers": "12000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000", "outliers": "25000" }, { "value": "24000,32000,35000,37000,39000, 58000", "outliers": "71000" } ] } ] }
{
    "chart": {
        "caption": "Distribution of annual salaries",
        "subcaption": "By Gender",
        "xAxisName": "Pay Grades",
        "YAxisName": "Salaries (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "showValues": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerboxcolor": "#008ee4",
            "upperboxcolor": "#6baa01",
            "data": [
                {
                    "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000",
                    "outliers": "16900"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
                    "outliers": "23000"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000",
                    "outliers": "72000"
                }
            ]
        },
        {
            "seriesname": "Female",
            "lowerboxcolor": "#e44a00",
            "upperboxcolor": "#f8bd19",
            "data": [
                {
                    "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
                    "outliers": "12000"
                },
                {
                    "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
                    "outliers": "25000"
                },
                {
                    "value": "24000,32000,35000,37000,39000, 58000",
                    "outliers": "71000"
                }
            ]
        }
    ]
}

In the data above, you will see that the outlier values for Grade 3 are 72000 for male and 71000 for female. Therefore, the outliers for these values are not shown on the chart.

You can opt to show these hidden outlier values.

A box and whisker chart with outlier values shown on the chart looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to show all outliers on the box and whisker chart:

Attribute Name Description

showAllOutliers

It is used to specify whether outliers beyond the range of the y-axis will be shown on the chart. Setting this attribute to 1 will show the outlier values beyond the range of the y-axis, setting it to 0 (default) will hide them.

The data structure needed to show all outlier values is given below:

{ "chart": { "caption": "Distribution of annual salaries", "subcaption": "By Gender", "xAxisName": "Pay Grades", "YAxisName": "Salaries (In USD)", "numberPrefix": "$", "theme": "fint", "showValues": "0", "showAllOutliers ": "1" }, "categories": [ { "category": [ { "label": "Grade 1" }, { "label": "Grade 2" }, { "label": "Grade 3" } ] } ], "dataset": [ { "seriesname": "Male", "lowerboxcolor": "#008ee4", "upperboxcolor": "#6baa01", "data": [ { "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000", "outliers": "16900" }, { "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500", "outliers": "23000" }, { "value": "15000,19000,25000,32000,50000,65000", "outliers": "72000" } ] }, { "seriesname": "Female", "lowerboxcolor": "#e44a00", "upperboxcolor": "#f8bd19", "data": [ { "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000", "outliers": "12000" }, { "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000", "outliers": "25000" }, { "value": "24000,32000,35000,37000,39000, 58000", "outliers": "71000" } ] } ] }
{
    "chart": {
        "caption": "Distribution of annual salaries",
        "subcaption": "By Gender",
        "xAxisName": "Pay Grades",
        "YAxisName": "Salaries (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "showValues": "0",
        "showAllOutliers ": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Grade 1"
                },
                {
                    "label": "Grade 2"
                },
                {
                    "label": "Grade 3"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Male",
            "lowerboxcolor": "#008ee4",
            "upperboxcolor": "#6baa01",
            "data": [
                {
                    "value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000",
                    "outliers": "16900"
                },
                {
                    "value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500",
                    "outliers": "23000"
                },
                {
                    "value": "15000,19000,25000,32000,50000,65000",
                    "outliers": "72000"
                }
            ]
        },
        {
            "seriesname": "Female",
            "lowerboxcolor": "#e44a00",
            "upperboxcolor": "#f8bd19",
            "data": [
                {
                    "value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000",
                    "outliers": "12000"
                },
                {
                    "value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000",
                    "outliers": "25000"
                },
                {
                    "value": "24000,32000,35000,37000,39000, 58000",
                    "outliers": "71000"
                }
            ]
        }
    ]
}

There! You have now seen how you can configure outliers for the box and whisker charts.

Top