@antoniolago/react-gauge-component

react-gauge-component

React component for displaying a gauge chart, using D3.js (this is forked from @Martin36/react-gauge-chart 0b24a45)

Demo

https://antoniolago.github.io/react-gauge-component/

Usage

Install it by running npm install react-gauge-component. Then to use it:

import GaugeComponent from 'react-gauge-component'

<GaugeComponent id="gauge-component1" />

Examples

Check the demo below for live examples of the charts

To create a default chart

<GaugeComponent id="gauge-component1" />

Chart with 20 subArcs and pointer at 86%

<GaugeComponent id="gauge-component2" 
  arc={{
    nbSubArcs: 20
  }}
  value={86} 
/>

Chart with custom colors and larger arc width

<GaugeComponent id="gauge-component3"
  arc={{
    nbSubArcs: 30,
    colorArray: ["#FF5F6D", "#FFC371"]},
    width: 0.3
  }}
  value={37} 
/>

Chart with custom arcs width

<GaugeComponent id="gauge-component5"
  arc={{
    nbSubArcs: 420,
    colorArray: ['#5BE12C', '#EA4228'],
    padding: 0.02,
    width: 0.2
  }}
  value={37}
/>

Gauge with custom minValue/maxValue and formatTextValue for value and mark.

<GaugeComponent
  id="gauge-component8"
  arc={{
    nbSubArcs: 30,
    colorArray: ['#5BE12C', '#F5CD19', '#EA4228'],
    width: 0.3,
  }}
  labels={{
    valueLabel: { fontSize: 40, 
      formatTextValue: value => {
        if (value >= 1000) {
          value = value / 1000;
          if (Number.isInteger(value)) {
            return value.toFixed(0) + ' mbit/s';
          } else {
            return value.toFixed(1) + ' mbit/s';
          }
        } else {
          return value.toFixed(0) + ' kbit/s';
        }
      }
    },
    markLabel: {
      marks: [
        { value: 1500},
      ],
      valueConfig: {
        formatTextValue: value => {
          if (value >= 1000) {
            value = value / 1000;
            if (Number.isInteger(value)) {
              return value.toFixed(0) + ' mbit/s';
            } else {
              return value.toFixed(1) + ' mbit/s';
            }
          } else {
            return value.toFixed(0) + ' kbit/s';
          }
        }
      }
    }
  }}
  value={900}
  maxValue={3000}
/>

API

Warning: Do not use the same id for multiple charts, as it will put multiple charts in the same container

Props:

• id: string: A unique identifier for the div surrounding the chart. This is an optional prop, with a default value of undefined.
• className: string: Adds a className to the div container. This is an optional prop, with a default value of undefined.
• style: React.CSSProperties: Adds a style object to the div container. Default value is {width: 100}.
• marginInPercent: number: Sets the margin for the chart inside the containing SVG element. Default value is 0.05.
• value: number: The value of the gauge. Default value is 0.
• minValue: number: The minimum value of the gauge. Default value is 0.
• maxValue: number: The maximum value of the gauge. Default value is 100.
• arc: object: The arc of the gauge.
  • cornerRadius: number: The corner radius of the arc. Default value is 7.
  • padding: number: The padding between subArcs, in rad. Default value is 0.05.
  • width: number: The width of the arc given in percent of the radius. Default value is 0.2.
  • nbSubArcs: number: The number of subArcs. This overrides subArcs. Default value is undefined
  • colorArray: Array<string>: The colors of the arcs. This overrides subArcs colors. Default value is undefined
  • subArcs: Array<object>: The subArcs of the gauge.
    • limit: number: The subArc limit value. When no limits are defined in the next subArcs in the list, it's optional and will auto-calculate remaining arcs limits. Example: [{limit: 70}, {}, {}, {}]. In a default minValue/maxValue, the values will be equal to [{limit: 70}, {limit: 80}, {limit: 90}, {limit: 100}]. But [{},{limit: 100}] will not work properly as the not defined subArc limit has a subArc with limit defined ahead in the array.
    • color: string: The subArc color. When not provided, it will use default subArc's colors and interpolate first and last colors when subArcs number is greater than colorArray.
    • showMark: boolean: Whether or not to show the mark. Default value is false.
    Default value is: [ { limit: 33, color: "#5BE12C"}, { limit: 66, color: "#F5CD19"}, { color: "#EA4228"}, ]
• needle: object: The needle of the gauge.
  • color: string: The color of the needle. Default value is #464A4F
  • baseColor: string: The color of the base of the needle. Default value is #464A4F
  • length: number: The length of the needle 0-1, 1 being the outer radius length. Default value is 0.70
  • animate: boolean: Whether or not to animate the needle. Default value is true
  • elastic: boolean: Whether or not to use elastic needle. Default value is false
  • animationDuration: number: The duration of the needle animation. Default value is 3000
  • animationDelay: number: The delay of the needle animation. Default value is 100
  • width: number: The width of the needle. Default value is 15
• labels: object: The labels of the gauge.
  • valueLabel: object: The value label of the gauge.
    • formatTextValue: (value: any) => string: The format of the value label. Default value is undefined.
    • fontSize: number: The font size of the value label. Default value is 50.
    • fontColor: string: The font color of the value label. Default value is "#fff".
    • hide: boolean: Whether or not to hide the value label. Default value is false.
  • markLabel: object: The mark label of the gauge.
    • hideMinMax: boolean: Whether or not to hide the min and max labels. Default value is false.
    • marks: Array: The marks of the gauge.
      • markerConfig: object: The value of the mark.
      • valueConfig: string: The name of the mark.
  • markLabel: object The markLabel of the gauge.
    • hideMinMax: boolean: Whether or not to hide the min and max labels. Default value is false
    • marks: Array<object>: The marks of the gauge. When not provided, it will use default gauge marks with five values.
      • value: number: The value of the mark.
      • valueConfig: object: The config of the mark's value label. When not provided, it will use default config.
      • markerConfig: object: The config of the mark's char. When not provided, it will use default config.
    • valueConfig: object: The default config of the mark's value label.
      • formatTextValue: (value: any) => string: The format of the mark's value label. Default value is undefined
      • fontSize: number: The font size of the mark's value label. Default value is 15
      • fontColor: string: The font color of the mark's value label. Default value is #464A4F
      • hide: boolean: Whether or not to hide the mark's value label. Default value is false
    • markerConfig: object: The default config of the mark's char.
      • char: string: The char of the mark. Default value is '_'
      • charSize: number: The font size of the mark's char. Default value is 30
      • charColor: string: The font color of the mark's char. Default value is #464A4F
      • hide: boolean: Whether or not to hide the mark's char. Default value is false

##### Colors for the chart

The colors could either be specified as an array of hex color values, such as ["#FF0000", "#00FF00", "#0000FF"] where each arc would a color in the array (colors are assigned from left to right). If that is the case, then the length of the array must match the number of levels in the arc. If the number of colors does not match the number of levels, then the first and the last color from the colors array will be selected and the arcs will get colors that are interpolated between those. The interpolation is done using d3.interpolateHsl.