@nationsinfo/react-simple-gauge v2.2.22

Installation

npm i @nationsinfo/react-simple-gauge

Usage

import Gauge from "@nationsinfo/react-simple-gauge";

<Gauge value={650} />;

Defaults

The range on gauge defaults to a scale from 300 to 900. To change these values, pass in "min" and "max" as props.

<Gauge value={650} min={0} max={800} />

The gauge will not show min and max labels by default. To show the labels, pass in "showLabels" as a prop. The labels will default to the min and max of the gauge.

<Gauge showLabels value={650} />

To modify the labels, pass in "minLabel" and "maxLabel" as props.

<Gauge showLabels minLabel="low" maxLabel="high" value={650} />

The gauge will not show a value change indicator by default. To show the value change indicator, pass in "showValueChange" and "prevValue" as props. The default colors of the gauge will be used for the indicator.

<Gauge showValueChange prevValue={648} value={650} />

To modify the indicator colors, pass in "valueIncreaseColor" and "valueDecreaseColor" as props.

<Gauge
  showValueChange
  valueIncreaseColor="#ef3ad8"
  valueDecreaseColor="#0006ff"
  prevValue={648}
  value={650}
/>

The default breakpoints for the different gauge colors are 77.4 and 84.6.

A value that is below 77.4% of the max value will have the red color "#ef3f3a" by default. A value between 77% and 84.6% of the max value will have the yellow color "#ffc047" by default. Any value higher than 84.6% of the max value will have the green color "#46d298" by default.

These breakpoint percentages and colors are customizable. To modify them, pass in the props "lowRangeColor", "midRangeColor", "highRangeColor", "lowRangeBreakpoint", and "midRangeBreakpoint".

<Gauge
  lowRangeColor="#FF2780"
  midRangeColor="#FF9A27"
  highRangeColor="#B2FF17"
  lowRangeBreakpoint={50}
  midRangeBreakpoint={75}
  value={650}
/>

You can also pass in a unique id.

<Gauge value={650} id="myID" />

An example with all available props passed in.

<Gauge
  id="myID"
  min={0}
  max={800}
  value={602}
  prevValue={598}
  showValueChange
  valueIncreaseColor="#EF3AD8"
  valueDecreaseColor="#0006FF"
  showLabels
  minLabel="low"
  maxLabel="high"
  lowRangeBreakpoint={50}
  midRangeBreakpoint={75}
  lowRangeColor="#FF2780"
  midRangeColor="#FF9A27"
  highRangeColor="#B2FF17"
/>

Due to the difficulties of responsive font size, the component uses defined widths at 3 different break points:

Screen size < 768px: 250px width

768px < Screen size < 1200px: 275px width

1200px < Screen size < 1400px: 300px width

To override or modify the default break points or sizes, wrap the component with a container div and modify the styles for any specific size in a media query. Classes "gauge", "gauge-label", and "indicator-container" are provided and can be used to modify the experience of the component. If left and right labels are enabled, the classes "left-label" and "right-label" may be used.

An example of scaling the component down on mobile devices:

<div className="gauge-container">
  <Gauge value={650} />
</div>

@media only screen and (max-width: 576px) {
  .gauge-container .gauge {
    width: 150px;
    height: 225px;
  }
  .gauge-container .gauge-label {
    font-size: 3em;
    top: 40%;
  }
  .gauge-container .indicator-container {
    top: 20%;
  }
  .gauge-container .left-label {
    left: 5px;
  }
  .gauge-container .right-label {
    right: 5px;
  }
}