Chart Bar Hds

<sl-chart-bar-hds> | SlChartBarHds
Since 2.0 experimental

Bar chart to display data in a bar format.

<sl-chart-bar-hds id="hds-bar-chart"></sl-chart-bar-hds>
<script>
    const barChart = document.getElementById('hds-bar-chart');
    barChart.data = {
      categories: [
        { id: 1, name: 'Company area that is grouped' },
        { id: 2, name: 'Countries that need to be grouped'},
        { id: 2, name: 'Other vectors that need to be grouped'}
      ],
      data: [
        { name: 'Company Area', value: 30000, category: 1,  href: 'https://google.com/' },
        { name: 'Finance', value: 70000, category: 1, href: 'https://google.com/' },
        { name: 'Australia', value: 50000, category: 2, href: 'https://google.com/' },
        { name: 'Asia', value: 28000, category: 2, href: 'https://google.com/' },
        { name: 'Another Vector', value: 10000, category: 3, href: 'https://google.com/' },
        { name: 'Yet Another Vector', value: 20000, category: 3, href: 'https://google.com/' },
      ]
    };
  </script>

Examples

Custom Bar gaps and Chart height 

<sl-chart-bar-hds id="hds-bar-chart-gap"></sl-chart-bar-hds>
<script>
    const barChartGap = document.getElementById('hds-bar-chart-gap');
    barChartGap.data = {
      categories: [],
      data: [
      { name: 'Company Area', value: 130000, href: 'https://google.com/' },
      { name: 'Finance', value: 20000, href: 'https://google.com/' },
      { name: 'Accounting', value: 160000, href: 'https://google.com/' },
      { name: 'Asia', value: 122000, href: 'https://google.com/' },
      { name: 'Another Vector', value: 70000, href: 'https://google.com/' },
      { name: 'Yet Another Vector', value: 110000, href: 'https://google.com/' },
    ]};
    barChartGap.height = 300
    barChartGap.barGap = 40
  </script>

<sl-chart-bar-hds id="hds-bar-chart-titles"></sl-chart-bar-hds>
<script>
    const barChartTitles = document.getElementById('hds-bar-chart-titles');
    barChartTitles.data = {
      categories: [],
      data: [
      { name: 'Company Area', value: 30000, href: 'https://google.com/' },
      { name: 'Finance', value: 70000, href: 'https://google.com/' },
      { name: 'Accounting', value: 50000, href: 'https://google.com/' },
      { name: 'Asia', value: 28000, href: 'https://google.com/' },
      { name: 'Another Vector', value: 10000, href: 'https://google.com/' },
      { name: 'Yet Another Vector', value: 20000, href: 'https://google.com/' },
    ]};
    barChartTitles.chartTitle = 'Accounting Break Down'
    barChartTitles.footerText = '2024 bi-monthly payments'
  </script>

Simple Chart with values placed on top of Bars 

<sl-chart-bar-hds id="hds-bar-chart-simple"></sl-chart-bar-hds>
<script>
    const barChartSimple = document.getElementById('hds-bar-chart-simple');
    barChartSimple.data = {
      categories: [],
      data: [
        { name: 'Company Area', value: 30000, href: 'https://google.com/' },
        { name: 'Finance', value: 70000, href: 'https://google.com/' },
        { name: 'Accounting', value: 50000, href: 'https://google.com/' },
        { name: 'Asia', value: 28000, href: 'https://google.com/' },
        { name: 'Another Vector', value: 10000, href: 'https://google.com/' },
        { name: 'Yet Another Vector', value: 20000, href: 'https://google.com/' },
      ]
    };
    barChartSimple.chartStyle = 'basic'
  </script>

Horizontal Chart 

<sl-chart-bar-hds id="hds-bar-chart-horizontal"></sl-chart-bar-hds>
<script>
    const barChartHorizontal = document.getElementById('hds-bar-chart-horizontal');
    barChartHorizontal.isHorizontal = true
    barChartHorizontal.data = {
      categories: [],
      data: [
      { name: 'Company Area', value: 30000, href: 'https://google.com/' },
      { name: 'Finance', value: 70000, href: 'https://google.com/' },
      { name: 'Accounting', value: 50000, href: 'https://google.com/' },
      { name: 'Asia', value: 28000, href: 'https://google.com/' },
      { name: 'Another Vector', value: 10000, href: 'https://google.com/' },
      { name: 'Yet Another Vector', value: 20000, href: 'https://google.com/' },
    ]};
  </script>

Horizontal simple Chart with values placed at the end of Bars 

<sl-chart-bar-hds id="hds-bar-chart-horizontal-basic"></sl-chart-bar-hds>
<script>
    const barChartHorizontalBasic = document.getElementById('hds-bar-chart-horizontal-basic');
    barChartHorizontalBasic.isHorizontal = true
    barChartHorizontalBasic.chartStyle = 'basic'
    barChartHorizontalBasic.data = {
      categories: [],
      data: [
      { name: 'Company Area', value: 30000, href: 'https://google.com/' },
      { name: 'Finance', value: 70000, href: 'https://google.com/' },
      { name: 'Accounting', value: 50000, href: 'https://google.com/' },
      { name: 'Asia', value: 28000, href: 'https://google.com/' },
      { name: 'Another Vector', value: 10000, href: 'https://google.com/' },
      { name: 'Yet Another Vector', value: 20000, href: 'https://google.com/' },
    ]};
  </script>

[component-metadata:sl-chart-bar-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 { categories: [], data: [] }
chartTitle
chart-title 		Title of the Chart string ''
valuePrefix
value-prefix 		Prefix for the value string ''
height chart height number 500
showLegend
show-legend 		Show legend boolean false
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
barGap
bar-gap 		Bar gap number 10
chartStyle
chart-style 		Chart style 'default' | 'basic' 'default'
isHorizontal
is-horizontal 		Switch the X and Y axis to make the chart horizontal boolean false
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, Data[], Element, unknown>, data: Data[], width: number, responsiveHeight: number, margin: { top: number; right: number; bottom: number; left: number }, popover: SlPopoverHds | null, isTouchDevice: boolean, blue: string, borderColour: string, textColour: string, borderRadius: string | number
createHorizontalBarChart() Creates a horizontal bar chart. svg: d3.Selection<d3.BaseType | SVGSVGElement, Data[], Element, unknown>, data: Data[], width: number, responsiveHeight: number, margin: { top: number; right: number; bottom: number; left: number }, popover: SlPopoverHds | null, isTouchDevice: boolean, blue: string, borderColour: string, textColour: string, borderRadius: string | number
setupInteractions() Sets up interactions for the bars. bars: d3.Selection<SVGGElement, Data, SVGGElement, unknown>, data: Data[], blue: string, isTouchDevice: boolean, popover: SlPopoverHds | null, x: , y: , container:

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>