Share chart Review

Share chart shows a visual representation of its enclosed items' values' relative magnitudes.

<duet-grid grid-template="small">
  <duet-share-chart unit="M€">
    <duet-share-chart-item value="50" color="primary">Lorem Ipsum</duet-share-chart-item>
    <duet-share-chart-item value="30" color="warning">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</duet-share-chart-item>
    <duet-share-chart-item value="60" color="secondary">Dolor Sit</duet-share-chart-item>
    <duet-share-chart-item value="10">Using default color</duet-share-chart-item>
    <duet-share-chart-item value="15">Using another default color</duet-share-chart-item>
  </duet-share-chart>
</duet-grid>

Properties #

Property	Attribute	Description	Type	Default
`theme`	`theme`	Theme of the component.	`"" \| "default" \| "turva"`	`""`
`unit`	`unit`	The string to show after each items value. When using "%" the enclosed items' values should add up to 100.	`string`	`"%"`

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

When you have ites with comparable values for which you want to give visual a representation of relative magnitudes

When not to use #

When the values are not actually comparable, e.g. don't have the same value
When there is a large number of items. There is no hard limit, but after 6 items you should start considering alternatives.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

This graph of the component is tagged with role="presentation" so it is hidden from the screen readers.
All the data is also in textual form.
Note that the component adds visually hidden percent share text label to each item, except when "%" is used as the unit. With "%" as the unit, you should take care that all items' values add up to 100.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.

Share chart Review

Properties #

Usage #

When to use #

When not to use #

Accessibility #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting