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 11, 2025 • Send feedback about this page