Chart
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 3 types of doughnut charts, 5 types of bar charts and a hybrid type which will be either a bar or a doughnut, depending on the viewport width. Each chart type was created to handle specific design needs. Below is a guide for appropriate usage of each type. Hybrid charts have been replaced by the Progress Monitor component.
Chart Type | Usage |
---|---|
Doughnut1 | This chart compares two states within a category with the option to include an unknown state, for example Direct, Indirect and Unspecified. |
Doughnut2 | Similar to Doughnut1, this chart compares two states within a category, however, each has a positive and negative connotation. There is also an option for no specification. An example of this would be Met, Not Met, Not Started. |
Doughnut3 | This chart should be used for multiple comparisons. |
Hybrid | This chart displays the progress made for one category and highlights it. Within larger viewports, it displays as a doughnut chart, but in smaller viewports it displays as a bar chart. This is because the chart is intended to be grouped with other hybrid charts to make an impactful visual comparison among categories. At smaller widths the vertical space required by the doughnut charts dilutes the impact. Hybrid charts have been replaced by the Progress Monitor component. |
Bar2 | This chart compares three qualitative states within a category, with an option for no answer such as Not Started, In Progress, Met, Not Met. |
Bar3 | This chart compares four qualitative states within a category, two positive and two negative, without an option for no answer, such as Met, Exceeded, Approached, Not Met. |
Bar4 | This chart displays the progress status for a category, for example Not Started, In Progress, Complete. |
Bar5 | This chart should be used for multiple comparisons. |
See the different types in the examples tab.
* Required property
Properties of the parent element wm-chart
doughnut1 | doughnut2 | doughnut3 | hybrid | bar1 | bar2 | bar3 | bar4 | bar5
doughnut1
.string
string
string
hybrid
boolean
wm-chart-slice
elements is still required.boolean
percentage | amount | none
none
.
Properties of the children elements wm-chart-slice
string
string
string
string
string
Deprecated properties of wm-chart
percentage | amount | none
none
. Deprecated in favor of value-format
.
Deprecated properties of wm-chart-slice
function
onclick
property to attach a function to the click event. Deprecated in favor of using popover-button-text
and listening to the wmChartPopoverButtonTriggered
event.Usage in HTML
Edit the code below to see changes reflected in the example above.
Javascript Sample
Example code for functionality.
Usage in Elm
Code generated from HTML.
wm-chart
when one of its popover buttons has been triggered. The event's detail
property contains the wm-chart-slice
element that has been triggered. See javascript sample in the examples tab for usage.Screen Reader
Screen readers announce the following when the user tabs on a chart: "Interactive chart. Use arrow keys to browse elements, press Tab to exit."
Keyboard Support
Key | Function |
---|---|
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). |
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
"0"
In this case, the legend should still include the option not represented in the graph. The
<wm-chart-slice>
should have anamount
of"0"
and an appropriate text for thelegend
. - 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 anamount
of"0"
and nolegend
text. You may omit the attribute or pass it an empty string.