Chart Pie Hds

<sl-chart-pie-hds> | SlChartPieHds
Since 2.0 experimental

Pie chart to display data in dollar breakdowns.

Horizontal and Fixed width (default theme) 

<sl-chart-pie-hds id="hds-pie-chart-horizontal-fixed"></sl-chart-pie-hds>
<script>
    const pieChart = document.getElementById('hds-pie-chart-horizontal-fixed');
    pieChart.data = [
      { group: 'Growth', label: 'Company Area', value: 30000, href: 'https://google.com/' },
      { group: 'Growth', label: 'Finance', value: 700000, href: 'https://google.com/' },
      { group: 'Growth', label: 'Accounting', value: 500000, href: 'https://google.com/' },
      { group: 'Growth', label: 'Asia', value: 200000, href: 'https://google.com/' },
      { group: 'Growth', label: 'Another Vector', value: 200000, href: 'https://google.com/' },
      { group: 'Growth', label: 'Yet Another Vector', value: 200000, href: 'https://google.com/' },
    ];
    pieChart.isResponsive = false
    pieChart.height = 400
    pieChart.chartTitle = 'Accounting Break Down'
    pieChart.subtitle = 'Chart Value'
    pieChart.valuePrefix = '$'
    pieChart.theme = 'default'
    pieChart.isHorizontal = true
  </script>

Horizontal and Responsive (light theme) 

<sl-chart-pie-hds id="hds-pie-chart-horizontal-responsive"></sl-chart-pie-hds>
<script>
    const pieChart = document.getElementById('hds-pie-chart-horizontal-responsive');
    pieChart.data = [
      { label: 'Company Area', value: 30000 },
      { label: 'Finance', value: 700000 },
      { label: 'Accounting', value: 500000 },
      { label: 'Asia', value: 200000 },
      { label: 'Another Vector', value: 200000 },
      { label: 'Yet Another Vector', value: 200000 },
    ];
    pieChart.isResponsive = true
    pieChart.chartTitle = 'Accounting Break Down'
    pieChart.subtitle = 'Chart Value'
    pieChart.valuePrefix = '$'
    pieChart.theme = 'light'
    pieChart.isHorizontal = true
  </script>

Vertical and Fixed width (dark theme) 

<sl-chart-pie-hds id="hds-pie-chart-vertical-fixed"></sl-chart-pie-hds>
<script>
    const pieChart = document.getElementById('hds-pie-chart-vertical-fixed');
    pieChart.data = [
      { label: 'Company Area', value: 30000 },
      { label: 'Finance', value: 700000 },
      { label: 'Accounting', value: 500000 },
      { label: 'Asia', value: 200000 },
      { label: 'Another Vector', value: 200000 },
      { label: 'Yet Another Vector', value: 200000 },
    ];
    pieChart.isResponsive = false
    pieChart.height = 300
    pieChart.chartTitle = 'Accounting Break Down'
    pieChart.subtitle = 'Chart Value'
    pieChart.valuePrefix = '$'
    pieChart.theme = 'dark'
  </script>

Vertical and Responsive (custom theme) 

<sl-chart-pie-hds id="hds-pie-chart-vertical-responsive"></sl-chart-pie-hds>
<script>
    const pieChart = document.getElementById('hds-pie-chart-vertical-responsive');
    pieChart.data = [
      { label: 'Company Area', value: 30000 },
      { label: 'Finance', value: 700000 },
      { label: 'Accounting', value: 500000 },
      { label: 'Asia', value: 200000 },
      { label: 'Another Vector', value: 300000 },
    ];
    pieChart.isResponsive = true
    pieChart.chartTitle = 'Accounting Break Down'
    pieChart.subtitle = 'Chart Value'
    pieChart.valuePrefix = '$'
    pieChart.theme = 'custom'
    pieChart.themeColors = [
      "#FF5733", "#33FF57", "#3357FF", "#F1C40F", "#8E44AD",
      "#1ABC9C", "#E74C3C", "#3498DB", "#2ECC71", "#E67E22",
    ];
  </script>

[component-metadata:sl-chart-pie-hds]

Slots

Name Description
(default) The default slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
data Data to populate the Chart DataPoint[] []
chartTitle
chart-title 		Title of the Chart string ''
subtitle Subtitle of the Chart string ''
valuePrefix
value-prefix 		Prefix for the value string ''
height chart height number 500
theme Theme of the chart ‘default’, ‘light’, ‘dark’, ‘custom’ string 'default'
themeColors
theme-colors 		Custom theme colors. Must set theme to ‘custom’ for this to work array []
isResponsive
responsive 		Responsive chart boolean false
isHorizontal
horizontal 		Horizontal chart boolean false
showLegend
show-legend 		Show legend boolean true
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.

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>