Chart Bar Hds

<sl-chart-bar-hds> | SlChartBarHds
Since 1.0 stable

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]

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.

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.

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>