Bar charts can be simple or grouped, depending on the nature of the data. A simple bar chart displays one set of data, with each bar representing a single category. A grouped bar chart shows multiple data series side by side for each category, allowing for comparisons between different groups. Bar charts are widely used in various fields, including business, education, and social sciences, to compare frequencies, percentages, or other measures across categories.

• Usage: 🧵 Patterns 🔍 Comparison
• Types:
  • Clustered Bar Chart compares individual values across categories.
  • Stacked Bar Chart compares both the total value and the breakdown of categories.
  • 100% Stacked Bar Chart focuses on the percentage contribution of each sub-category, normalizing each bar to 100%.

💡 See the js-chart-examples repo for many detailed examples of how to use and customize (style) different types of bar charts.

Bar Charts, Stacked Bar Charts and 100% Stacked Bar Charts require the following files to render correctly.

Bar charts accept the following chart attributes.

🧱 class | 🗂️ type | 🕒 version | 📋 template | ↔️ width | ↕️ height | 📄 title | 📄 ytitle | 📄 xtitle | 📏 scalemin | 📏 scalemax | 🔄 swapaxis | 🔽 sortdata | 🚫 limitdata | 🔲 showborder | 🏷️ showlabels | 📘 showlegend | 🎮 showcontrols | 🗂️ showdatatable | #️⃣ showgridlines | ➖ showzeroline | 📲 showwidget

The js-labels input container sets the labels that anchors each cluster on the axis (e.g., different months, regions, or items).

The container accepts a comma-separated list of text values.

<div class="js-labels">label-0, label-1, label-2, ..., label-n</div>

The example below sets the category labels on a chart to the months of the year.

<div class="js-labels">Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec</div>

The js-values input container sets the individual data series (or data sets) on a chart.

The container accept a comma-separated list of numeric values.

<div class="js-values">10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120</div>

The js-values input container accepts a title attribute that is used to set a name or short description for the data series (or data set).

<div class="js-values" title="Sales revenue 2024">10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120</div>

ℹ️ A title will automatically be assigned to each data series (or data set) if no title attribute is assigned to the js-values container.

Clustered data series (or multiple data series) can be set by specifying multiple js-values input containers. Each container represents a single data series (or data set).

<div class="js-values" title="Sales revenue 2024">20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130</div>
<div class="js-values" title="Sales revenue 2023">15, 25, 35, 45, 55, 65 75, 85, 95, 105, 115, 125</div>
<div class="js-values" title="Sales revenue 2022">10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120</div>

Every chart is customized (or styled) using one of the supported style templates.

Style directives are used to override the customization applied by the style template to each chart.

Bar charts support the following style directives.

🖼️ js-canvas-* | 📊 js-chart-* | 🎨 js-color-* | 🖱️ js-control-button-* | 🏷️ js-datalabel-* | 🗂️ js-datatable-* | 🦶 js-footer-* | #️⃣ js-grid-line-* | 📘 js-legend-* | 🎮 js-options-menu-* | 📏 js-scale-* | 📄 js-title-* | 🧱 js-value-bar-* | ➖ js-zero-line-*

💡 See the 👀 js-chart-examples repo for many detailed examples of how to use the style directives to customize a chart.

💡 See the js-chart-examples repo for many detailed examples of how to use different types of bar charts.

The example below renders a clustered bar chart, showing Quarterly Sales of three product lines (e.g., in a retail business).

<div class="js-chart" type="100% stacked bar" template="darkweb" title="Quarterly Sales by Product Line" ytitle="Product Lines" xtitle="Sales (USD)">
	<div class="js-labels">Q1, Q2, Q3, Q4</div>

	<div class="js-values" title="Clothing (USD)">15000, 17500, 14000, 19000</div>
	<div class="js-values" title="Accessories (USD)">8000, 9200, 10500, 11000</div>
	<div class="js-values" title="Home Decor (USD)">6500, 7000, 6800, 7400</div>

	<div class="js-color-palette">Orange, SteelBlue, CadetBlue</div>
	<div class="js-datalabel-font-size">14px</div>
	<div class="js-datalabel-font-weight">600</div>
	<div class="js-datalabel-text-color">white</div>
	<div class="js-value-bar-series-margin">10px</div>
</div>

The js-labels input container sets the labels that anchor each cluster on the axis. In this example, each cluster represents one quarter in the year.

There are three js-values input containers. Each container represents one data series (or data set) on the chart. In the example, each container represents one product line.

• The js-color-palette style directive sets a list of three colors to be used on the chart. Each color is assigned to a data series (or data set) in a round robin rotation assignment.
• The js-datalabel-font-size sets a font-size of 14px for all data labels on the chart.
• The js-datalabel-font-weight sets a font-weight of 600 for all data labels on the chart.
• The js-datalabel-text-color sets a foreground color of white for all data labels on the chart.
• The js-value-bar-series-margin sets a gap of 10px between each bar on the chart.

💡 See the js-chart-examples repo for many detailed examples of how to use different types of bar charts.