Chart Bar Grouped Hds

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

A grouped bar chart.

<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>

Data With negative values 

<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>

Data Accounts Type with Negative values 

<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.data = {
    labels: ["Team A", "Team B", "Team C"],
    datasets: [
      {
        name: "Super",
        data: [
          { value: 50, href: "https://google.com/" },
          { value: 10, href: "https://google.com/" },
          { value: 5, href: "https://google.com/" },
        ],
      },
      {
        name: "Investment",
        data: [
          { value: 25, href: "https://google.com/" },
          { value: -15, href: "https://google.com/" },
          { value: 5, href: "https://google.com/" },
        ],
      },
      {
        name: "Other",
        data: [
          { value: 43, href: "https://google.com/" },
          { value: 21, href: "https://google.com/" },
          { value: 1, href: "https://google.com/" },
        ],
      },
    ],
  };
</script>

Data Asset Allocation Type with Negative values Horizontal 

<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.data = {
  labels: ["2022-23", "2023-24", "2024-25", "2025-26"],
  datasets: [
    {
      name: "Growth",
      data: [
        { value: 125000, href: "https://google.com/" },
        { value: 75000, href: "https://google.com/" },
        { value: -12000, href: "https://google.com/" },
        { value: 25000, href: "https://google.com/" },
      ],
    },
    {
      name: "Defensive",
      data: [
        { value: 140000, href: "https://google.com/" },
        { value: 70000, href: "https://google.com/" },
        { value: -9000, href: "https://google.com/" },
        { value: 16000, href: "https://google.com/" },
      ],
    },
    {
      name: "Other",
      data: [
        { value: 150000, href: "https://google.com/" },
        { value: 60000, href: "https://google.com/" },
        { value: 11000, href: "https://google.com/" },
        { value: -21000, href: "https://google.com/" },
      ],
    },
  ],
};
</script>

Data Accounts Type Horizontal 

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

Data Fees Type 

<sl-chart-bar-grouped-hds id="hds-bar-chart-fees"></sl-chart-bar-grouped-hds>
<script>
  const barChart = document.getElementById('hds-bar-chart-fees');
  barChart.valueType = 'currency';
  barChart.popOverWidth = '210'
  barChart.data = {
    labels: [
      "Peter Pan",
      "Mick Montgomery",
      "Sam Wilde",
      "Xiping Chi",
      "Esmeralda Ciao",
      "Cherry Evans",
    ],
    datasets: [
      {
        name: "Fees paid per adviser",
        data: [
          { value: 352, href: "https://google.com/" },
          { value: 795, href: "https://google.com/" },
          { value: 810, href: "https://google.com/" },
          { value: 1200, href: "https://google.com/" },
          { value: 995, href: "https://google.com/" },
          { value: 200, href: "https://google.com/" },
        ],
      },
    ],
  };
</script>

Data In-Specie inflows Type 

<sl-chart-bar-grouped-hds id="hds-bar-chart-inspecie"></sl-chart-bar-grouped-hds>
<script>
  const barChart = document.getElementById('hds-bar-chart-inspecie');
  barChart.valueType = 'currency';
  barChart.popOverWidth = '260'
  barChart.data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      name: "Expected in-specie inflows",
      data: [
        { value: 350000, href: "https://google.com/" },
        { value: 295000, href: "https://google.com/" },
        { value: 215000, href: "https://google.com/" },
        { value: 180000, href: "https://google.com/" },
        { value: 150000, href: "https://google.com/" },
        { value: 125000, href: "https://google.com/" },
      ],
    },
  ],
};
</script>

[component-metadata:sl-chart-bar-grouped-hds]

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
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>