11.12.1

Gauge

Default


Disable Animation


Title


Units


Full Circle


Min Max Labels


Min defaults to 0, Max to 100.

Sizing


Gauge resizes dynamically to fit whatever element it's placed within.

Note: set overflow to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

Height


Color Overrides


Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors and use ONE desired value data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8 in an array. Hex colors are also available eg: #CA0095

Complex

Abandoned Calls

Total Abandoned

39

calls

of 390
% Abandoned

We are able to wrap our Gauge kits within multiple other Flex and Card components.



Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • shadow
  • line_height
  • display
  • cursor
  • flex_direction
  • flex_wrap
  • justify_content
  • justify_self
  • align_items
  • align_content
  • align_self
  • flex
  • flex_grow
  • flex_shrink
  • order
  • id
  • data
  • aria
  • children
  • chart_data
  • style
  • title
  • prefix
  • suffix
  • height
  • tooltip_html
  • full_circle
  • show_labels
  • disable_animation
  • min
  • max
  • colors