The “bar” chart type renders horizontal bars for each row of data. One use case would be to quickly compare records grouped by lookup values. For example, it can be used to show the number of orders made with each employee on the Orders page of the Northwind sample app. The chart reveals that “Peacock” is the most active employee.
To use “bar” chart type, add the keyword “bar” to any “pivot-” tag, and make sure that it is separated with hyphens (-).
Data Field | Tag |
EmployeeID | pivot1-row1-bar |
![A bar chart showing count of orders by employee. A bar chart showing count of orders by employee.](/blog/2015/03/bar-chart-type/image02.png)
Here is the data for the above graph:
![The data for the chart of count of orders by employee. The data for the chart of count of orders by employee.](/blog/2015/03/bar-chart-type/image04.png)
Hovering over or clicking on a single bar will reveal the data behind that bar.
![The tooltip reveals the value behind the bar. The tooltip reveals the value behind the bar.](/blog/2015/03/bar-chart-type/image06.png)
When multiple values are specified for each row, a bar will be rendered for each value in a different color.
Data Field | Tag |
EmployeeID | pivot1-row1-bar |
ShipVia | pivot1-col1 |
![Multiple values for each row render multiple separate bars. Multiple values for each row render multiple separate bars.](/blog/2015/03/bar-chart-type/image08.png)
Multiple columns of data can be seen in the table below.
![The values for the chart showing count of orders by customer grouped by shipper. The values for the chart showing count of orders by customer grouped by shipper.](/blog/2015/03/bar-chart-type/image10.png)
Each row can also be displayed as a single bar, with values stacked on that bar, by using the “barstacked” chart type.
Data Field | Tag |
EmployeeID | pivot1-row1-barstacked |
ShipVia | pivot1-col1 |
![The stacked bar chart type renders all values for each row in a single bar. The stacked bar chart type renders all values for each row in a single bar.](/blog/2015/03/bar-chart-type/image12.png)