title: Creating a dynamic gauge in React using percentages
body: <p>I am creating a BMI calculator and I am trying to create a gage so that as that it reflects the BMI. I am using a gage using 'react-gauge-chart` and it is rendered like this</p>
  <pre><code>   &lt;GaugeChart
          id=&quot;gauge-chart&quot;
          percent={gageCalc()}
          nrOfLevels={3}
          colors={[&quot;#FFFF00&quot;, &quot;#228B22&quot;, &quot;#FF0000&quot;]}
        /&gt;
  </code></pre>
  <p>This is <code>gageCalc()</code> and the dictionary I used:</p>
  <pre><code>  const gageCalc = () =&gt; {
      try {
        var c = [Math.round(calcBMI())];
        var x = dict[Math.round(calcBMI())];
        if (c &lt; 16) return 0.0;
        if (c &gt; 30) return 1;
        return x;
      } catch (e) {
       // does nothing right now
      }
    };
  
  var dict = {
      16: 0.0,
      17: 0.16,
      18: 0.33,
      19: 0.4,
      20: 0.4,
      21: 0.5,
      22: 0.5,
      23: 0.5,
      24: 0.66,
      25: 0.66,
      26: 0.7,
      27: 0.825,
      28: 0.825,
      29: 0.9,
      30: 1,
    };
  
  </code></pre>
  <p>The dictionary sort of works but isn't the most accurate. I just kind of spread the percentages out as best I could.
  <code>calcBMI()</code> simply returns the BMI of the person.
  So my problem is that the gauge's needle is set using a percentage based on the value returned from <code>gageCalc()</code>. Other than my dictionary, I don't know how to make the needle on the BMI gauge be accurate.</p>
  <p>For example, if someone has a BMI of 22, then they have normal BMI and the needle will be in the green area of the gauge, but if they have a BMI of 28, then I need the needle to fall in the red zone.
  This is what the gauge looks like: <a href="https://i.stack.imgur.com/kAxJe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kAxJe.png" alt="My BMI Gauge" /></a></p>
  <p>This is the chart I am following:</p>
  <pre><code>Underweight (yellow) = Below 18.5
  Healthy Weight (green) = 18.5 to 24.9
  Overweight (red) = 30 or greater
  </code></pre>
  <p>Is there a formula that might do this for me? Is there a better gauge I can use or is my dictionary the best way to do this. Thanks!</p>