Data Commons Gauge Chart Web Component
Data Commons Web Component for visualizing a single statistical variable about a single place.
Usage
<datacommons-gauge
header="Title here"
place="place_dcid"
variable="variable_dcid"
min="0"
max="100"
></datacommons-gauge>
Attributes
Required
| Name | Type | Description |
|---|---|---|
| header | string | Chart title. |
| max | number | Gauge maximum value. |
| min | number | Gauge mininmum value. |
| place | string | Place DCID to plot. |
| variable | string | Variable DCID to plot. |
Optional
| Name | Type | Description |
|---|---|---|
| colors | list | Optionally specify a custom chart color scheme for the display variable. Will interpolate colors linearly depending on how many are passed in. Values should follow CSS specification (keywords, rgb, rgba, hsl, #hex). Separate multiple values with spaces, e.g., "#ff0000 #00ff00 #0000ff". Make sure individual colors have no spaces. For example, use rgba(255,0,0,0.3) instead of rgba(255, 0, 0, 0.3). |
Advanced Configuration
| Name | Type | Description |
|---|---|---|
| apiRoot | string | Domain to make data fetch API calls from. Used primarily for fetching data from custom DCs. Default: https://datacommons.org. |
Examples
Example 1: Show percentage of US population that are internet users
Code:
<datacommons-gauge
header="Percentage of US Population that are Internet Users"
place="country/USA"
variable="Count_Person_IsInternetUser_PerCapita"
min="0"
max="100"
></datacommons-gauge>