Bar Chart

<wa-bar-chart> Since 3.3 Experimental Pro Bar-chart requires access to Web Awesome Pro

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. 

<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

Providing Data with JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code. 

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

To manually import this component from React, use the following code. 

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

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

CSS custom properties

Learn more about CSS custom properties.

Need a hand? Report a bug Ask for help
    No results
    Navigate Enter Select Esc Close