Chart Bar Grouped Hds

<sl-chart-bar-grouped-hds> | SlChartBarGroupedHds
Since 2.0 experimental

Short summary of the component’s intended use.

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

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

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.

Events

Name React Event Description Event Detail
sl-event-name Emitted as an example. -

Learn more about events.

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.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-example>
  • <sl-popover-hds>