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.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 = 'Total value'
    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 = 'Total value'
    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 = 'Total value'
    pieChart.theme = 'custom'
    pieChart.themeColors = [
      "#FF5733", "#33FF57", "#3357FF", "#F1C40F", "#8E44AD",
      "#1ABC9C", "#E74C3C", "#3498DB", "#2ECC71", "#E67E22",
    ];
  </script>

Hide legend 

<sl-chart-pie-hds hide-legend id="hds-pie-chart-hide-legend"></sl-chart-pie-hds>
<script>
    const pieChart = document.getElementById('hds-pie-chart-hide-legend');
    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 = 'Total value'
    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 ''
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
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
hideLegend
hide-legend 		Hide legend boolean false
popoverTheme
popover-theme 		Popover theme 'light' | 'dark' 'light'
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>