Bar Chart

<wa-bar-chart>

Pro

Included with Web Awesome Pro

Stable

Bar charts compare quantities across categories using rectangular bars. They work well for showing rankings, highlighting differences between groups, and tracking changes across time periods.

Get Bar Chart with Web Awesome Pro!

Subscribing to Web Awesome Pro gives you every Pro component, plus premium themes, color tools, team collaboration, and more.

Pro Components
Responsive Layout Tools
Ever-Growing Pattern Library
Unlimited Hosted Projects
Pre-Built Pro Themes
Pro Theme Builder
Pro Color Tools
Official Figma Design Kit
WA Pro Perpetual License
Actual Human™ Support

Get Web Awesome Pro + Bar Chart!

<wa-bar-chart
  id="bar-hero"
  label="Quarterly Revenue"
  description="A bar chart comparing online and in-store revenue across four quarters"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-hero');

  chart.config = {
    data: {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [
        { label: 'Online', data: [42, 58, 63, 71] },
        { label: 'In-Store', data: [65, 53, 48, 52] },
      ],
    },
  };
</script>

For advanced configuration such as mixed chart types, custom plugins, and direct Chart.js access, see <wa-chart>.

Examples

Link to This Section

Providing Data with JavaScript

Link to This Section

For dynamic data, set the config property directly. The chart will re-render automatically.

<wa-bar-chart id="bar-js-example" label="Survey Results" description="A bar chart of survey results by category">
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-js-example');

  chart.config = {
    data: {
      labels: ['Excellent', 'Good', 'Average', 'Poor'],
      datasets: [
        {
          label: 'Responses',
          data: [45, 30, 18, 7],
        },
      ],
    },
  };
</script>

Note that config is shallowly reactive. If you mutate the existing object in place, you must reassign it to trigger a re-render!

Providing Data with JSON

Link to This Section

Place a <script type="application/json"> tag inside the component with your chart data. The type field can be omitted since wa-bar-chart already knows its chart type.

<wa-bar-chart label="Survey Results" description="A bar chart of survey results by category">
  <script type="application/json">
    {
      "data": {
        "labels": ["Excellent", "Good", "Average", "Poor"],
        "datasets": [
          {
            "label": "Responses",
            "data": [45, 30, 18, 7]
          }
        ]
      }
    }
  </script>
</wa-bar-chart>

Multiple Datasets

Link to This Section

Add multiple objects to the datasets array to compare groups side by side.

<wa-bar-chart
  id="bar-multi"
  label="Quarterly Sales by Channel"
  description="A bar chart comparing three sales channels across four quarters"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-multi');

  chart.config = {
    data: {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [
        { label: 'Online', data: [42, 58, 63, 71] },
        { label: 'In-Store', data: [65, 53, 48, 52] },
        { label: 'Wholesale', data: [28, 32, 35, 40] },
      ],
    },
  };
</script>

Custom Colors

Link to This Section

Override the default color palette using the --fill-color-* and --border-color-* CSS custom properties on the component.

<wa-bar-chart
  id="bar-colors"
  label="Custom Colors"
  description="A bar chart with custom purple and cyan colors"
  style="
    --fill-color-1: color-mix(in srgb, var(--wa-color-purple-60) 50%, transparent);
    --border-color-1: var(--wa-color-purple-60);
    --fill-color-2: color-mix(in srgb, var(--wa-color-cyan-60) 50%, transparent);
    --border-color-2: var(--wa-color-cyan-60);
  "
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-colors');

  chart.config = {
    data: {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [
        { label: 'Product A', data: [42, 58, 63, 71] },
        { label: 'Product B', data: [65, 53, 48, 52] },
      ],
    },
  };
</script>

Horizontal Bars

Link to This Section

Use the orientation="horizontal" attribute to render bars horizontally. This is useful when category labels are long or when you want to emphasize ranking.

<wa-bar-chart
  id="bar-horizontal"
  orientation="horizontal"
  label="Department Satisfaction"
  description="A horizontal bar chart showing satisfaction scores by department"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-horizontal');

  chart.config = {
    data: {
      labels: ['Engineering', 'Marketing', 'Sales', 'Design', 'Support'],
      datasets: [
        {
          label: 'Satisfaction Score',
          data: [88, 76, 82, 91, 79],
        },
      ],
    },
  };
</script>

Stacked Bars

Link to This Section

Use the stacked attribute to stack datasets on top of each other. This is helpful for showing how parts contribute to a total.

<wa-bar-chart
  id="bar-stacked"
  stacked
  label="Monthly Expenses"
  description="A stacked bar chart showing expenses broken into categories"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-stacked');

  chart.config = {
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [
        { label: 'Rent', data: [1200, 1200, 1200, 1200, 1200, 1200] },
        { label: 'Utilities', data: [180, 160, 150, 140, 170, 190] },
        { label: 'Groceries', data: [420, 380, 450, 400, 430, 410] },
      ],
    },
  };
</script>

Border Width

Link to This Section

Use the --border-width CSS custom property to control the thickness of bar borders.

<wa-bar-chart
  id="bar-border"
  style="--border-width: 4px"
  label="Thick Borders"
  description="A bar chart with thicker bar borders"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-border');

  chart.config = {
    data: {
      labels: ['A', 'B', 'C', 'D'],
      datasets: [
        {
          label: 'Values',
          data: [30, 50, 20, 40],
        },
      ],
    },
  };
</script>

Legend

Link to This Section

Use the legend-position attribute to control where the legend appears. Supported values include top (default), bottom, left, right, start, and end. The start and end values are direction-aware and will flip in RTL layouts. Add without-legend to hide it entirely.

<wa-bar-chart
  id="bar-legend"
  legend-position="bottom"
  label="Legend at Bottom"
  description="A bar chart with the legend positioned at the bottom"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-legend');

  chart.config = {
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      datasets: [
        { label: 'Completed', data: [12, 19, 8, 15, 22] },
        { label: 'Pending', data: [5, 3, 10, 7, 2] },
      ],
    },
  };
</script>

Grid Lines

Link to This Section

Use the grid attribute to control which axes show grid lines. Options are both (default), x, y, and none.

<wa-bar-chart
  id="bar-grid"
  grid="y"
  label="Y-Axis Grid Only"
  description="A bar chart showing only horizontal grid lines"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-grid');

  chart.config = {
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      datasets: [
        {
          label: 'Tasks Completed',
          data: [12, 19, 8, 15, 22],
        },
      ],
    },
  };
</script>

Axis Labels

Link to This Section

Use the x-label and y-label attributes to add descriptive labels to each axis.

<wa-bar-chart
  id="bar-axis"
  x-label="Product"
  y-label="Units Sold"
  label="Product Sales"
  description="A bar chart with labeled axes showing units sold per product"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-axis');

  chart.config = {
    data: {
      labels: ['Widget', 'Gadget', 'Gizmo', 'Doohickey'],
      datasets: [
        {
          label: 'Units Sold',
          data: [340, 220, 180, 95],
        },
      ],
    },
  };
</script>

Axis Range

Link to This Section

Use the min and max attributes to constrain the value axis.

<wa-bar-chart
  id="bar-range"
  min="0"
  max="100"
  label="Test Scores"
  description="A bar chart with a constrained y-axis from 0 to 100"
>
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-range');

  chart.config = {
    data: {
      labels: ['Alice', 'Bob', 'Carol', 'Dave'],
      datasets: [
        {
          label: 'Score',
          data: [82, 91, 76, 88],
        },
      ],
    },
  };
</script>

Disabling Tooltips

Link to This Section

Use the without-tooltip attribute to hide the tooltips that appear when hovering over data points.

<wa-bar-chart id="bar-tooltip" without-tooltip label="No Tooltips" description="A bar chart with tooltips disabled">
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-tooltip');

  chart.config = {
    data: {
      labels: ['A', 'B', 'C', 'D'],
      datasets: [
        {
          label: 'Values',
          data: [30, 50, 20, 40],
        },
      ],
    },
  };
</script>

Disabling Animations

Link to This Section

Use the without-animation attribute to disable chart transitions.

<wa-bar-chart id="bar-anim" without-animation label="No Animation" description="A bar chart with animation disabled">
</wa-bar-chart>
<script type="module">
  const chart = document.querySelector('#bar-anim');

  chart.config = {
    data: {
      labels: ['A', 'B', 'C', 'D'],
      datasets: [
        {
          label: 'Values',
          data: [30, 50, 20, 40],
        },
      ],
    },
  };
</script>

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/[email protected]/components/bar-chart/bar-chart.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/bar-chart/bar-chart.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/bar-chart/bar-chart.js';

To import this component for React 18 or below, use the following code:

import WaBarChart from '@awesome.me/webawesome/dist/react/bar-chart/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	An optional `<script type="application/json">` element containing the Chart.js configuration object.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`config`	The Chart.js configuration object. Setting this property will automatically re-render the chart. Type `ChartJS['config']`
`description` `description`	A description of the chart, used for accessibility. Type `string \| null` Default `null`
`grid` `grid`	Which axes to show grid lines on. Type `'x' \| 'y' \| 'both' \| 'none'` Default `'both'`
`indexAxis` `index-axis`	The base axis of the dataset. 'x' for vertical bars and 'y' for horizontal bars. Type `'x' \| 'y'` Default `'x'`
`label` `label`	A label for the chart, used for accessibility. Type `string \| null` Default `null`
`legendPosition` `legend-position`	The position of the legend relative to the chart. Type `LayoutPosition \| 'start' \| 'end'` Default `'top'`
`max` `max`	The maximum value for the value axis. Type `number \| null` Default `null`
`min` `min`	The minimum value for the value axis. Type `number \| null` Default `null`
`plugins` `plugins`	Additional Chart.js plugins to register for this chart instance. Type `array` Default `[]`
`stacked` `stacked`	Stacks datasets on top of each other along the value axis. Type `boolean` Default `false`
`type` `type`	The type of chart to render. Valid types include `bar`, `line`, `pie`, `doughnut`, `polarArea`, `radar`, `scatter`, and `bubble`. Type `ChartType` Default `'bar'`
`withoutAnimation` `without-animation`	Disables chart animations Type `boolean` Default `false`
`withoutLegend` `without-legend`	Hides the legend Type `boolean` Default `false`
`withoutTooltip` `without-tooltip`	Hides tooltips over data points Type `boolean` Default `false`
`xLabel` `xLabel`	A label for the x-axis. Type `string \| null` Default `null`
`yLabel` `yLabel`	A label for the y-axis. Type `string \| null` Default `null`

CSS custom properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--border-color-1`	Border color for the first dataset. Default `var(--wa-color-blue-60)`
`--border-color-2`	Border color for the second dataset. Default `var(--wa-color-pink-60)`
`--border-color-3`	Border color for the third dataset. Default `var(--wa-color-green-60)`
`--border-color-4`	Border color for the fourth dataset. Default `var(--wa-color-yellow-60)`
`--border-color-5`	Border color for the fifth dataset. Default `var(--wa-color-purple-60)`
`--border-color-6`	Border color for the sixth dataset. Default `var(--wa-color-orange-60)`
`--border-radius`	Border radius for bar charts. Default `var(--wa-border-radius-s)`
`--border-width`	Border width for bars and arcs. Default `var(--wa-border-width-s)`
`--fill-color-1`	Fill color for the first dataset. Default `color-mix(in srgb, var(--wa-color-blue-60) 40%, transparent)`
`--fill-color-2`	Fill color for the second dataset. Default `color-mix(in srgb, var(--wa-color-pink-60) 40%, transparent)`
`--fill-color-3`	Fill color for the third dataset. Default `color-mix(in srgb, var(--wa-color-green-60) 40%, transparent)`
`--fill-color-4`	Fill color for the fourth dataset. Default `color-mix(in srgb, var(--wa-color-yellow-60) 40%, transparent)`
`--fill-color-5`	Fill color for the fifth dataset. Default `color-mix(in srgb, var(--wa-color-purple-60) 40%, transparent)`
`--fill-color-6`	Fill color for the sixth dataset. Default `color-mix(in srgb, var(--wa-color-orange-60) 40%, transparent)`
`--grid-border-width`	Border width for chart grid lines and axis borders. Default `var(--wa-border-width-s)`
`--grid-color`	Color of the chart grid lines and axis borders. Default `var(--wa-color-neutral-border-quiet)`
`--line-border-width`	Border width for line and radar charts. Default `var(--wa-border-width-m)`
`--point-radius`	Radius of data point dots. Default `var(--wa-border-width-m)`

Need a hand?

Report a bug

Ask for help

Getting Started

Resources

Theming & Utilities

Components

Data Visualization ProData Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

Bar Chart

Examples

Providing Data with JavaScript

Providing Data with JSON

Multiple Datasets

Custom Colors

Horizontal Bars

Stacked Bars

Border Width

Legend

Grid Lines

Axis Labels

Axis Range

Disabling Tooltips

Disabling Animations

Importing

Slots

Attributes & Properties

CSS custom properties

Quick Links

Recent Searches

Getting Started

Resources

Theming & Utilities

Components

Data Visualization ProData Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

Web Awesome Elsewhere

Bar Chart

Examples

Providing Data with JavaScript

Providing Data with JSON

Multiple Datasets

Custom Colors

Horizontal Bars

Stacked Bars

Border Width

Legend

Grid Lines

Axis Labels

Axis Range

Disabling Tooltips

Disabling Animations

Importing

Slots

Attributes & Properties

CSS custom properties

Quick Links

Recent Searches

We Have Cookies…