Chart Bar Grouped Hds

<sl-chart-bar-grouped-hds> | SlChartBarGroupedHds
Since 1.0 stable

Grouped bar charts display numeric values across multiple categorical variables.

Grouped bar charts are an extension of bar charts, the bars can be clustered in groups or stacked in a single bar.

Grouped bar chart

In a grouped bar chart different categorical variables for a value are grouped into clusters, each category picks up a colour from the categorical theme. 

<sl-chart-bar-grouped-hds id="hds-bar-chart"></sl-chart-bar-grouped-hds>
<script>
  const barChart = document.getElementById('hds-bar-chart');
  barChart.valueType = 'currency';
  barChart.popOverWidth = '180'
  barChart.data = {
    labels: ["LDI - Short term", "LDI - Medium term", "LDI - Long term", "LDI - Long term income"],
    datasets: [
      {
        name: "Start value",
        data: [
          { value: 50000, href: "https://google.com/" },
          { value: 60000, href: "https://google.com/" },
          { value: 75000, href: "https://google.com/" },
          { value: 90000, href: "https://google.com/" },
        ],
      },
      {
        name: "Close value",
        data: [
          { value: 55000, href: "https://google.com/" },
          { value: 65000, href: "https://google.com/" },
          { value: 80000, href: "https://google.com/" },
          { value: 98000, href: "https://google.com/" },
        ],
      }
    ],
  }

</script>

Display negative values

Bar charts need to be able to display negative values. Negative values shift the 0 axis to accommodate the negative values. The 0 axis is emphasised and will always appear. 

<sl-chart-bar-grouped-hds id="hds-bar-chart-negative"></sl-chart-bar-grouped-hds>
<script>
  const barChart = document.getElementById('hds-bar-chart-negative');
  barChart.valueType = 'currency';
  barChart.popOverWidth = '210'
  barChart.data = {
    labels: ["January", "February", "March", "April"],
    datasets: [
      {
        name: "Inflows",
        data: [
          { value: 129000, href: "https://google.com/" },
          { value: 150000, href: "https://google.com/" },
          { value: 45000, href: "https://google.com/" },
          { value: 599000, href: "https://google.com/" },
        ],
      },
      {
        name: "Outflows",
        data: [
          { value: -12000, href: "https://google.com/" },
          { value: -1000, href: "https://google.com/" },
          { value: -75000, href: "https://google.com/" },
          { value: -50000, href: "https://google.com/" },
        ],
      },
    ],
  };
</script>

Horizontal grouped bar chart

Horizontal bar charts can be used when displaying nominal values, or non-numerical labels that have no inherent order or ranking. 

<sl-chart-bar-grouped-hds id="hds-bar-chart-accounts-negative"></sl-chart-bar-grouped-hds>
<script>
  const barChart = document.getElementById('hds-bar-chart-accounts-negative');
  barChart.isHorizontal = true;
  barChart.marginLeft = 80;
  barChart.data = {
  labels: ["Growth", "Defensive", "Other"],
  datasets: [
    {
      name: "2025-2026",
      data: [
        { value: 125000, href: "https://google.com/" },
        { value: 110000, href: "https://google.com/" },
        { value: 100000, href: "https://google.com/" },
      ],
    },
    {
      name: "2024-2025",
      data: [
        { value: 75000, href: "https://google.com/" },
        { value: 70000, href: "https://google.com/" },
        { value: 60000, href: "https://google.com/" },
      ],
    },
    {
      name: "2023-2024",
      data: [
        { value: 25000, href: "https://google.com/" },
        { value: 20000, href: "https://google.com/" },
        { value: 15000, href: "https://google.com/" },
      ],
    },
  ],
};
</script>

Stacked bar chart

A stacked bar chart displays categorical variables in one bar. It is valuable for displaing a sub-set set of data within a main primary variable. 

<sl-chart-bar-grouped-hds id="hds-bar-chart-accounts"></sl-chart-bar-grouped-hds>
<script>
  const barChart = document.getElementById('hds-bar-chart-accounts');
  barChart.isStacked = true;
  barChart.data = {
    labels: ["Team A", "Team B", "Team C"],
    datasets: [
      {
        name: "Super",
        data: [
          { value: 50, href: "https://google.com/" },
          { value: 40, href: "https://google.com/" },
          { value: 35, href: "https://google.com/" },
        ],
      },
      {
        name: "Investment",
        data: [
          { value: 40, href: "https://google.com/" },
          { value: 30, href: "https://google.com/" },
          { value: 20, href: "https://google.com/" },
        ],
      },
      {
        name: "Other",
        data: [
          { value: 10, href: "https://google.com/" },
          { value: 5, href: "https://google.com/" },
          { value: 5, href: "https://google.com/" },
        ],
      },
    ],
  };
</script>

Stacked bars can display negative values as well. The horizontal orientation allows for the display of long category labels. 

<sl-chart-bar-grouped-hds id="hds-bar-chart-negative-stacked"></sl-chart-bar-grouped-hds>
<script>
  const barChart = document.getElementById('hds-bar-chart-negative-stacked');
  barChart.isHorizontal = true;
  barChart.isStacked = true;
  barChart.valueType = 'currency';
  barChart.popOverWidth = '210'
  barChart.data = {
    labels: ["January", "February", "March", "April"],
    datasets: [
      {
        name: "Inflows",
        data: [
          { value: 129000, href: "https://google.com/" },
          { value: 950000, href: "https://google.com/" },
          { value: 65000, href: "https://google.com/" },
          { value: 45000, href: "https://google.com/" },
        ],
      },
      {
        name: "Outflows",
        data: [
          { value: -12000, href: "https://google.com/" },
          { value: -1000, href: "https://google.com/" },
          { value: -75000, href: "https://google.com/" },
          { value: -50000, href: "https://google.com/" },
        ],
      },
    ],
  };
</script>

Properties

Name Description Reflects Type Default
data Data to populate the Chart DataPoint { labels: [], datasets: [] }
chartTitle
chart-title 		Title of the Chart string ''
valueType
value-type 		The value type of the data. Used to control rendering of Y-axis labels and popup values 'decimal' | 'currency' | 'percent' 'decimal'
minDecimalPlaces
min-decimal-places 		Minimum decimal places for the value { decimal: number; currency: number; percent: number; } { decimal: 0, currency: 0, percent: 0 }
maxDecimalPlaces
max-decimal-places 		Maximum decimal places for the value { decimal: number; currency: number; percent: number; } { decimal: 2, currency: 2, percent: 2 }
height chart height number 500
marginLeft
margin-left 		Manually set the left margin of the chart. Useful when there is a long label. number 0
showLegend
show-legend 		Show legend boolean true
footerText
footer-text 		Footer text string ''
showXAxis
show-x-axis 		Show the X Axis of the chart. boolean true
showYAxis
show-y-axis 		Show the Y Axis of the chart. boolean true
ticks The number of ticks to show on the Axis. number | null null
barGap
bar-gap 		Bar gap number 10
chartStyle
chart-style 		Chart style 'default' | 'basic' 'default'
hideGridLines
hide-grid-lines 		Hide grid lines boolean false
isHorizontal
is-horizontal 		Switch the X and Y axis to make the chart horizontal boolean false
isStacked
is-stacked 		Stack the bars boolean false
popOverWidth
popover-width 		Popover width string '150'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Methods

Name Description Arguments
createVerticalBarChart() Creates a vertical bar chart. svg: d3.Selection<d3.BaseType | SVGSVGElement, DataPoint, Element, unknown>, data: DataPoint, width: number, responsiveHeight: number, margin: { top: number; right: number; bottom: number; left: number }, popover: SlPopoverHds | null, isTouchDevice: boolean, borderRadius: string | number, axisValues: number[], color: ScaleOrdinal<string, unknown, never>
createHorizontalBarChart() Creates a horizontal bar chart. svg: d3.Selection<d3.BaseType | SVGSVGElement, DataPoint, Element, unknown>, data: DataPoint, width: number, responsiveHeight: number, margin: { top: number; right: number; bottom: number; left: number }, popover: SlPopoverHds | null, isTouchDevice: boolean, borderRadius: string | number, axisValues: number[], color: ScaleOrdinal<string, unknown, never>
setupInteractions() Sets up interactions for the bars. bars: d3.Selection<SVGGElement, Data, SVGGElement, unknown>, data: DataPoint, color: ScaleOrdinal<string, unknown, never>, isTouchDevice: boolean, popover: SlPopoverHds | null, colors:

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-popover-hds>