---
name: Bar chart
description: Learn how to visualize data with bar charts.
keywords:
- charts
- ArcGIS Online
- 2D
- web components
- bar chart
- charts components
- charts model
---
# Bar chart
**Bar chart**
New York City short-term rental distribution count across different neighbourhood groups.
## What is a bar chart?
Bar charts are used to summarize and compare categorical or temporal data, with values shown through the relative lengths of bars.
The x-axis typically displays discrete categories or temporal intervals with each category or interval mapped to one or more bars, while the y-axis represents a numeric scale that determines the height of each bar.
## Data configurations
This section covers a few data configuration examples for bar charts, each configured using the bar chart model.
See the [bar chart model reference](/references/charts-components/model/bar-chart-model/bar-chart-model/) for the full list of available properties and methods.
### With category field
Bar chart with a category field renders one bar per unique category value.
**Bar chart with category field example**
This chart visualizes the distribution of short-term rentals in NYC by neighborhood group, with each bar representing a neighborhood group category. The height of each bar reflects the count of rentals in that neighborhood group.
1. Set the [`xAxisField`](/references/charts-components/model/bar-chart-model/bar-chart-model/#xAxisField) property to `"neighbourhood_group"` to specify the category field.
```html
Bar chart with category field
```
### With numeric fields
Bar chart with a category field and numeric fields renders one bar per category, with the height of each bar determined by the specified aggregation of the numeric field.
**Bar chart with numeric fields example**
This chart visualizes the average price of short-term rentals in NYC by neighborhood group.
1. Set the [`xAxisField`](/references/charts-components/model/bar-chart-model/bar-chart-model/#xAxisField) property to `"neighbourhood_group"`.
2. Set the [`numericFields`](/references/charts-components/model/bar-chart-model/bar-chart-model/#numericFields) property to `"price"` to specify the numeric field.
3. Set the [`aggregationType`](/references/charts-components/model/bar-chart-model/bar-chart-model/#aggregationType) property to `"avg"` to calculate the average price per neighborhood group.
```html
Bar chart with numeric fields
```
### With split by field
Bar chart with a category field and a split by field displays multiple related data series side by side within each category.
**Bar chart with split by field example**
This chart visualizes the distribution of short-term rentals in NYC by neighborhood group, with each bar representing a neighborhood group category. The bars are split by room type, showing the count of each room type within each neighborhood group.
1. Set the [`xAxisField`](/references/charts-components/model/bar-chart-model/bar-chart-model/#xAxisField) property to `"neighbourhood_group"`.
2. Set the [`splitByField`](/references/charts-components/model/bar-chart-model/bar-chart-model/#splitByField) property to `"room_type"` to divide each main category into grouped bars for subcategory comparison.
```html
Bar chart with split by field
```
### With date field
Bar chart configured with a date field (temporal bar chart) as the category field can visualize data over time, allowing trends and patterns to be easily identified.
**Bar chart with date field example**
This chart visualizes the distribution of short-term rentals in NYC over time, with each bar representing a 6 month interval.
1. Set the [`xAxisField`](/references/charts-components/model/bar-chart-model/bar-chart-model/#xAxisField) property to `"last_review"`(a date field).
2. Set the [`binTemporalData`](/references/charts-components/model/bar-chart-model/bar-chart-model/#binTemporalData) property to `true` to enable temporal binning, which groups date values into time intervals for better visualization.
3. Set the [`temporalBinningSize`](/references/charts-components/model/bar-chart-model/bar-chart-model/#temporalBinningSize) property and the [`temporalBinningUnit`](/references/charts-components/model/bar-chart-model/bar-chart-model/#temporalBinningUnit) property to group the date values.
```html
Bar chart with date field
```
## Customization options
### Stacked type
When a bar chart is configured with multiple numeric fields or a split by field, you can set the [`stackedType`](/references/charts-components/model/bar-chart-model/bar-chart-model/#stackedType) property to display the bars as stacked percentages.
- `sideBySide` (default): Bars are displayed next to each other for each category, allowing for easy comparison of individual data series.
- `stacked`: Bars are displayed on top of each other for each category, showing the cumulative total and the relative contribution of each data series.
- `stacked100`: Bars are displayed on top of each other for each category, with each bar representing 100% of the total, emphasizing the relative contribution of each data series within the category.
| Stacked | 100% Stacked |
|---|---|
|  |  |