Chart Types: Badge

What it looks like

this chart type is useful for displaying a single value to users.

How to use this chart type

chartType: 'badge'

Required properties

valueAttribute [String]

The application expects your api to return an object where the value to be displayed is an attribute nested somewhere in that object. You must use this property to tell the app where to look for the value it should display.

This should be a string that describes the path to the value from the object returned from the api. Nested objects should be separated by a .

Example

Your api response looks like this:

  {
    data: {
      attributes: {
        value: 1000000
      }
    }
  }

The value is what you would like to display to the user so your valueAttribute would be 'data.attributes.value'

badgeLabel [Object][String]

The label object here has the same format as all of the other label properties in the app configuration.

  badgeLabel: {
    en: 'Active Fires',
    es: 'Incendios activos',
    fr: 'Feux actifs',
    ...
  }

At a minimum you must configure a label for the application's active language.

Optional Properties

color [String]

A valid css color value. This controls the color of the border and the value.

  color: '#000000'