Angular Stacked Chart

    The Ignite UI for Angular Stacked Chart belongs to a special group of charts that render multiple values of data items as stacked area/polygons, bars, columns, lines, or splines. Standard Stacked Charts render actual values of data items while Stacked 100% Charts render values as percentage of total values.

    Angular Stacked Chart Types

    The following example, you can use the drop-down to switch between all of the different types stacked charts available in the Angular IgxDataChartComponent control.

    The following sections demonstrate individual types of Ignite UI for Angular Stacked Charts.

    Angular Stacked Area Chart

    Stacked Area Charts are rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Chart, with the only difference being that visually, the shaded areas are stacked on top of each other.

    You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStackedAreaSeriesComponent, as shown in the example below.

    Angular Stacked 100 Area Chart

    Sometimes the series represent part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea.

    You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStacked100AreaSeriesComponent, as shown in the example below.

    Angular Stacked Bar Chart

    A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value.

    The Stacked Bar Chart differs from the Bar Chart in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis.

    In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels of the chart) and a Category Y Axis (left labels of the chart). You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStackedBarSeriesComponent, as shown in the example below.

    Angular Stacked 100% Bar Chart

    The Angular Stacked 100% Bar Chart is identical to the Angular stacked bar chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100% bar chart presents the data in terms of percent of the sum of all values in a data point.

    In this example of a Stacked 100% Bar Chart, the Energy Product values are shown as a 100% value of all of the data in the fragments of the horizontal bars. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStacked100BarSeriesComponent, as shown in the example below.

    Angular Stacked Column Chart

    The Stacked Column Chart is identical to the Column Chart in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).

    You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStackedColumnSeriesComponent, as shown in the example below.

    Angular Stacked 100% Column Chart

    The Stacked 100% Column Chart is identical to the Stacked Column Chart in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100% Column Chart presents the data in terms of percent of the sum of all values in a data point.

    The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStacked100ColumnSeriesComponent, as shown in the example below.

    Angular Stacked Line Chart

    The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStackedLineSeriesComponent, as shown in the example below:

    Angular Stacked 100% Line Chart

    The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.

    You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStacked100LineSeriesComponent, as shown in the example below:

    Angular Stacked Spline Area Chart

    Stacked Spline Area Charts are rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Charts follow all of the same requirements as Area Chart, with the only difference being that the visually shaded areas are stacked on top of each other.

    You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStackedSplineAreaSeriesComponent, as shown in the example below.

    Angular Stacked 100% Spline Area Chart

    The Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea.

    You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStacked100SplineAreaSeriesComponent, as shown in the example below.

    Angular Stacked Spline Chart

    The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStackedSplineSeriesComponent, as shown in the example below.

    Angular Stacked 100% Spline Chart

    The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.

    You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxStacked100SplineSeriesComponent.

    Additional Resources

    You can find more information about related chart types in these topics:

    API References

    The following table lists API members mentioned in the above sections:

    Chart Type Control Name API Members
    Stacked Area IgxDataChartComponent IgxStackedAreaSeriesComponent
    Stacked Bar IgxDataChartComponent IgxStackedBarSeriesComponent
    Stacked Column IgxDataChartComponent IgxStackedColumnSeriesComponent
    Stacked Line IgxDataChartComponent IgxStackedLineSeriesComponent
    Stacked Spline IgxDataChartComponent IgxStackedSplineSeriesComponent
    Stacked Spline Area IgxDataChartComponent IgxStackedSplineAreaSeriesComponent
    Stacked 100% Area IgxDataChartComponent IgxStacked100AreaSeriesComponent
    Stacked 100% Bar IgxDataChartComponent IgxStacked100BarSeriesComponent
    Stacked 100% Column IgxDataChartComponent IgxStacked100ColumnSeriesComponent
    Stacked 100% Line IgxDataChartComponent IgxStacked100LineSeriesComponent
    Stacked 100% Spline IgxDataChartComponent IgxStacked100SplineSeriesComponent
    Stacked 100% Spline Area IgxDataChartComponent IgxStacked100SplineAreaSeriesComponent