The chart component renders a doughnut or bar chart, including the popover. It is composed of a parent element wm-chart and children elements wm-chart-slice.
The component type determines the number of slices and you must provide all of them (see the notes tab).
The popover will render if both props popover-title and popover-text are provided.
There are three types of doughnut charts and five types of bar charts. Each chart type was created to handle specific design needs. Below is a guide for appropriate usage of each type. For charts that show change in data over time, see the Line Chart component.
|Doughnut1||This chart displays two states within a category and an unknown state, for example Direct, Indirect and Unspecified. Slices are sorted in descending order.|
|Doughnut2||Similar to Doughnut1, this chart displays four states within a category. In this variant two states have a positive and negative connotation, a third (optional) one is neutral, and the last is unknown/unset. An example of this would be Met, Not Met, Conditionally Met, Not Started. Slices are sorted in descending order.|
|Doughnut3||This chart should be used for multiple comparisons. Slices are sorted in descending order.|
|Bar2||This chart displays three or four qualitative states within a category and an unknown state. For example: Met, Not Met, Conditionally Met, Awaiting Review, Not Submitted.|
|Bar3||This chart compares four qualitative states within a category, two positive and two negative. For example, Met, Exceeded, Approached, and Not Met.|
|Bar4||This chart displays the progress status for a category. For example Not Started, In Progress, and Complete.|
|Bar5||This chart should be used to compare up to seven qualitative states for a category.|
|Bar6||This simple bar chart should be used to compare discrete categorical data.|
|Bar7||This simple bar chart compares discrete categorical data with intentional color associations for their respective labels.|
See the different types in the examples tab.
* Required property
Properties of the parent element
"top" | "none"
top. If set to
noneno label is displayed, but an external label matching the chart's label should be visually grouped with the chart.
string: CSS width value
bar7only — determines bar label width. Defaults to
doughnut1 | doughnut2 | doughnut3 | bar1 | bar2 | bar3 | bar4 | bar5 | bar6 | bar7
bar5only — adds a gray color for the first slice (useful when the first slice corresponds to "not started" elements).
bar6only — show or hide the grid. Defaults to
wm-chart-sliceelements is still required.
bar7only — show or hide the y-axis bar legend. Defaults to
percentage | amount | none
Properties of the children elements
Type: doughnut2 (4 slices)
Usage in HTML
Edit the code below to see changes reflected in the example above.
Example code for functionality.
Usage in Elm
Code generated from HTML.
wm-chartwhen one of its popover buttons has been triggered. The event's
detailproperty contains the
Screen readers announce the following when the user tabs on a chart: "Interactive chart. Use arrow keys to browse elements, press Tab to exit."
|Arrow Down Arrow Right||
|Arrow Up Arrow Left||
|Tab||Exits the chart (bringing focus to the next focusable element).|
|Shift + Tab||Exits the chart (bringing focus to the previous focusable element).|
|Enter||Triggers the popover button (if popover is open and has a button).|
bar 6 and
bar 7 can handle instances
where values are 0. For all other charts, devs should handle the empty
You must provide a
<wm-chart-slice> for every option, even
if they should not be displayed. This ensures that the component knows which
option the slice corresponds to, and assigns the proper color to each slice.
There are two cases in which a slice should be hidden:
When the option exists but its amount is
In this case, the legend should still include the option not represented in the graph. The
<wm-chart-slice>should have an
"0"and an appropriate text for the
When the option has been removed (e.g. by the user)
In this case, both the slice and its corresponding legend should be hidden. The
<wm-chart-slice>should have an
legendtext. You may omit the attribute or pass it an empty string.