How To Create Gauge Chart In D3 Js React? Top 12 Favorites

To create a gauge chart in d3.js with React, you can follow these steps:

1. Install D3.js and React-D3-Library:

npm install d3 react-d3-library

1. Import the required modules:

javascript
import React from 'react';
import { Gauge } from 'react-d3-library';
import * as d3 from 'd3';

1. Define the component:

javascript
class GaugeChart extends React.Component {
  render() {
    // Set up the data
    const data = [
      { value: 50, label: 'Label 1' },
      { value: 75, label: 'Label 2' },
      { value: 100, label: 'Label 3' }
    ];

    // Set up the scale
    const minVal = 0;
    const maxVal = 100;
    const tickStep = 10;
    const range = maxVal - minVal;
    const tickValues = d3.range(minVal, maxVal + tickStep, tickStep);
    const colorScale = d3.scaleLinear()
      .domain([0, range / 2, range])
      .range(['#FF0000', '#FFA500', '#00FF00']);

    // Set up the arc
    const arc = d3.arc()
      .innerRadius(40)
      .outerRadius(100)
      .startAngle(-Math.PI / 2);

    // Set up the gauge
    const gauge = (selection) => {
      selection.each(function() {
        const svg = d3.select(this);
        const width = +svg.attr('width');
        const height = +svg.attr('height');

        // Create the gauge group
        const gaugeGroup = svg.append('g')
          .attr('transform', `translate(${width / 2},${height / 2})`);

        // Create the ticks
        gaugeGroup.selectAll('.tick')
          .data(tickValues)
          .enter().append('line')
          .attr('class', 'tick')
          .attr('x1', 0)
          .attr('y1', -95)
          .attr('x2', 0)
          .attr('y2', function(d) { return d % 20 === 0 ? -90 : -85 })
          .attr('stroke', '#000')
          .attr('stroke-width', function(d) { return d % 20 === 0 ? 3 : 1 });

        // Create the labels
        gaugeGroup.selectAll('.tick-label')
          .data(tickValues)
          .enter().append('text')
          .attr('class', 'tick-label')
          .attr('x', 0)
          .attr('y', function(d) { return -80 - (d % 20 === 0 ? 15 : 10) })
          .attr('text-anchor', 'middle')
          .text(function(d) { return d });

        // Create the arcs
        data.forEach(function(d) {
          const value = d.value;
          const label = d.label;
          const endAngle = arc((value / maxVal) * Math.PI);
          gaugeGroup.append('path')
            .datum({endAngle: endAngle})
            .style('fill', colorScale(value))
            .attr('d', arc)
            .append('title')
            .text(label);
        });

        // Create the needle
        const needle = gaugeGroup.append('g')
          .attr('class', 'needle')
          .attr('transform', 'rotate(-90)');
        needle.append('path')
          .attr('d', 'M0,-5L0,5