DOCSEARCHbyAlgolia
Submit Docs

react-gauge-chart

repository·master·Indexed 42 days ago

https://github.com/martin36/react-gauge-chart

A React component for displaying customizable semi-circle gauge charts powered by D3.js. Version 0.5.1 supports configurable segments, needle animations, color interpolation via d3.interpolateHsl, and custom needle or text components.

Tokens
1.6K
Snippets
5
Records
9
Agent score
54%

What's inside react-gauge-chart

  1. How color interpolation works in GaugeChart

    master

    The colors prop behavior depends on the length of the array relative to nrOfLevels:

    1. Exact Match: If colors.length === nrOfLevels, each segment is assigned the corresponding color from the array from left to right.
    2. Interpolation: If the lengths do not match, the component selects the first and last colors from the array and interpolates the colors for the segments in between using d3.interpolateHsl.

  2. Use the <GaugeChart /> component

    master

    Import GaugeChart from react-gauge-chart and render it in your component.

    Important:

    • Each chart must have a unique id. Using the same id for multiple charts will cause them to be rendered in the same container.
    • To prevent unexpected resizing bugs when updating props, it is recommended to set a fixed height via the style prop.
    import GaugeChart from 'react-gauge-chart'

const chartStyle = {
  height: 250,
}

<GaugeChart id="gauge-chart1" style={chartStyle} />

  4. Examples of GaugeChart configurations

    master

    Below are common usage patterns for the GaugeChart component.

    // Chart with 20 levels and pointer at 86%
<GaugeChart id="gauge-chart2" 
  nrOfLevels={20} 
  percent={0.86} 
/>

// Chart with custom colors and larger arc width
<GaugeChart id="gauge-chart3" 
  nrOfLevels={30} 
  colors={["#FF5F6D", "#FFC371"]} 
  arcWidth={0.3} 
  percent={0.37} 
/>

// Chart with custom arcs width and specific segment lengths
<GaugeChart id="gauge-chart5"
  nrOfLevels={420}
  arcsLength={[0.3, 0.5, 0.2]}
  colors={['#5BE12C', '#F5CD19', '#EA4228']}
  percent={0.37}
  arcPadding={0.02}
/>

// Chart with disabled animation
<GaugeChart id="gauge-chart6" 
  animate={false} 
  nrOfLevels={15} 
  percent={0.56} 
  needleColor="#345243" 
/>

  5. Customize needle and text components

    master

    You can provide custom components for the needle or the text label to achieve advanced styling.

    • customNeedleComponent: A custom React element for the needle. Note: You must manually handle the rotation of the needle based on the percentage value.
    • customNeedleComponentClassName (string): Class name for the custom needle container.
    • customNeedleStyle (object): Style for the custom needle container.
    • textComponent: A custom React element for the text label.
    • textComponentContainerClassName (string): Class name for the text component container.

  6. Configure GaugeChart props

    master

    The <GaugeChart /> component accepts several props to control its appearance, animation, and data.

    Core Props

    • id (string, required): Unique identifier for the chart container.
    • percent (number): The value the needle points to (between 0 and 1). Default is 0.4.
    • nrOfLevels (number): Number of segments in the arc. Default is 3.
    • colors (array): Array of HEX colors. If the array length matches nrOfLevels, each segment gets a specific color. If not, colors are interpolated between the first and last elements using d3.interpolateHsl.
    • arcsLength (array): Specifies the length of each individual arc. If provided, nrOfLevels is ignored.

    Visual Styling

    • arcWidth (number): Thickness of the arc. Default is 0.2.
    • arcPadding (number): Distance between arc segments. Default is 0.05.
    • cornerRadius (number): Corner radius for chart elements. Default is 6.
    • needleColor (string): Color of the needle triangle. Default is #464A4F.
    • needleBaseColor (string): Color of the circle at the needle base. Default is #464A4F.

    Text and Labels

    • hideText (boolean): Whether to hide the percentage display. Default is false.
    • textColor (string): Color of the text. Default is #FFFFFF.
    • fontSize (string): Font size of the text.
    • formatTextValue (function): Function to format the displayed value (e.g., value => value + '%').
    • textComponent (element): Custom text label component.

    Animation

    • animate (boolean): Whether to animate the needle on load. Default is true.
    • animDelay (number): Delay in ms before animation starts. Default is 500.
    • animateDuration (number): Duration in ms for the animation. Default is 3000.

  8. Use the GaugeChart component

    master

    The GaugeChart component is the primary entry point for creating responsive gauge charts using D3. It automatically scales to the width of its container and uses the smaller dimension (width or height) to determine the radius, ensuring the SVG remains square.

    To use it, import the component and provide the necessary props such as percent (the value to display) and colors (the array of colors for the gauge levels).

    import GaugeChart from 'react-gauge-chart';

const MyChart = () => (
  <GaugeChart 
    percent={0.4} 
    colors={["#00FF00", "#FF0000"]} 
  />
);