Angular Bar Chart

    The Ignite UI for Angular Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to Column Chart except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while Column Chart has vertical orientation (up and down)

    Angular Bar Chart Example

    You can create Angular Bar Chart in the IgxDataChartComponent control by binding your data sources to multiple IgxBarSeriesComponent, as shown in the example below:

    Bar Chart Recommendations

    Are Angular Bar Charts right for your project?

    Angular Bar Chart includes several variants based on your data or how you want to tell the correct story with your data. These include:

    • Grouped Bar Chart
    • Stacked Bar Chart
    • Polar Bar Chart
    • Stacked 100 Bar Chart

    Bar Chart Use Cases

    There are several common use cases for choosing a Bar Chart:

    • You need to show trends over time or a numeric value change in a category of data.
    • You need to compare data values of 1 or more data series.
    • You want to show a part-to-whole comparison.
    • You want to show top or bottom percentage of categories.
    • Analyzing multiple data points grouped in sub-categories (Stacked Bar).

    These use cases are commonly used for the following scenarios:

    • Sales Management.
    • Inventory Management.
    • Stock Charts.
    • Any String Value Comparing a Numeric Value or Time-Series Value.

    Bar Chart Best Practices:

    • Start you numeric Axis at 0.
    • Use a single color for the bars.
    • Be sure the space separating each bar is 1/2 the width of the bar itself.
    • Be sure ranking or comparing ordered categories (items) are sorted in increasing or decreasing order.
    • Right-align category values on the Y-Axis (left side labels of chart) for readability.

    When Not to Use Bar Chart

    • You have too much data so the Y-Axis can't fit in the space or is not legible.
    • You need a detailed Time-Series analysis - consider a Line Chart with a Time-Series for this type of data.

    Bar Chart Data Structure:

    • The data source must be an array or a list of data items.
    • The data source must contain at least one data item.
    • The list must contain at least one data column (string or date time).
    • The list must contain at least one numeric data column.

    Angular Bar Chart with Single Series

    Bar Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the left to right of the chart towards the values of data points. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxBarSeriesComponent, as shown in the example below:

    Angular Bar Chart with Multiple Series

    The Bar Chart is able to render multiple bars per category for comparison purposes. In this example, the Bar Chart is comparing box office revenue amongst popular movie franchises. You can create this type of chart in the IgxDataChartComponent control by binding your data to multiple IgxBarSeriesComponent, as shown in the example below:

    Angular Bar Chart Styling

    The Bar Chart can be styled, and allows for the ability to use annotation values for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the IgxDataChartComponent control by binding your data to a IgxBarSeriesComponent and adding a IgxCalloutLayerComponent, 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.

    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.

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

    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: