- Selector
- bp-chart-pie
Inputs
| Input | Type | Description | Notes |
|---|---|---|---|
| data | object[] | The data used to create the chart. | If the data needs to be updated dynamically, create a copy of the data, make the needed changes, then reassign the new array to the input variable. Otherwise Angular will not pick up on the change detection. |
| name | string | The key from the data to use for the name of each segment. | Default is "name". |
| value | string | The key from the data to use for the value of each segment. | Default is "value". |
| bpID | string | The value for the SVG's id attribute. | Ids must only be used once per page. Ids should be camelCase, e.g.: #myId. See identifiers. |
| title | string | The string to use as the SVG's title element. | Required. |
| description | string | A string used by screen readers for when a segment is selected. | Default is "#{percent}% #{name} with #{value}" where percent, name, and value are the segments corresponding values. Required. |
| formatters | object | An object containing formatter functions for the information in the pie chart. | See formatters. |
Identifiers
| Property | Type | Description | Notes |
|---|---|---|---|
| name | (string) => string | The formatter function for the name text. | Default is (name: string): string => name. |
| percent | (number) => string | The formatter function for the percent text. | Default is (percent: number): string => String(percent) + '%'. |
| value | (number) => string | The formatter function for the value text. | Default is (value: number): string => new Intl.NumberFormat().format(value). |
Identifiers
| ID | Description |
|---|---|
bpID | The unique identifier for the pie chart component. |
bpID + 'Description' | The unique identifier for the aria controls / description. |