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>
Page last updated: November 27, 2024 • Send feedback about this page