title: Implementing a choropleth chart using chartjs-chart-geo plugin with react-chartjs-2
body: <p>I am trying to create a choropleth chart of the United States with functionality similar to - if not the same as <strong><a href="https://codepen.io/sgratzl/pen/GRKLQBw" rel="nofollow noreferrer">this example</a></strong> from <strong><a href="https://github.com/sgratzl/chartjs-chart-geo" rel="nofollow noreferrer">chartjs-chart-geo</a></strong> using <strong><a href="https://github.com/jerairrest/react-chartjs-2" rel="nofollow noreferrer">react-chartjs-2</a></strong> wrapper for chartjs.</p>
  
  <p>The problem that I ran into is how to use chartjs-chart-geo with react-chartjs-2. I was able to get plugins working that modify existing chart types, but I'm not sure how to get it working with a plugin that adds new chart types.</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>import React, { useState, useEffect} from "react";
  import { Line } from "react-chartjs-2";
  import 'chartjs-chart-geo';
  import stateUnemployment from "../march-state-unemployment.json"
  
  
  const JSON_IMPORT = stateUnemployment;
  
  const transformData = obj =&gt; {
      let stateNames = [];
      let dataMonth = new Date().getMonth();
      let dataValue = [];
  
      console.log(obj.length);
      console.log(obj[1].state);
      // Code for parsing json data goes here
      for (let i = 0; i &lt; obj.length; i++) {
          stateNames[i] = obj[i].state;
          dataValue[i] = obj[i].unemploymentPercent;
      }
  
      return {
          stateNames,
          dataMonth,
          dataValue,
      };
  };
  
  const USPageMap = () =&gt; {
      const [data, setData] = useState(null);
  
      useEffect(() =&gt; {
          const {dataLabel, dataValue} = transformData(JSON_IMPORT);
          setData({
              labels: dataLabel,
              datasets: [
                  {
                      // code for configuring choropleth data goes here?
                      label: "States",
                      data: dataValue,
                  }
              ]
          });
      }, []);
  
      return (
          &lt;div&gt;
              &lt;h2&gt;National Unemployment&lt;/h2&gt;
              // Swapping line for Choropleth doesn't seem to work?
              &lt;Line
                  data={data}
                  options={{
                      maintainAspectRatio: true,
                      legend: {
                          display: false
                 },
                  plugins: {
                      // setting plugin options usually goes here
                      scale: {
                          projection: 'albersUsa'
                      },
                      geo: {
                          colorScale: {
                              display: true,
                              position: 'bottom',
                              quantize: 5,
                              legend: {
                                  position: 'bottom-right',
                              },
                          },
                      },
                  }
              }}
          /&gt;
          &lt;/div&gt;
       );
    };
  
  export default USPageMap;
  </code></pre>
  
  <p>Here is an example of the JSON being used: </p>
  
  <pre><code>[
    {
      "state": "Alabama",
      "totalUnemployed": "77,988",
      "unemploymentPercent": 3.5
    },
    {
      "state": "Alaska",
      "totalUnemployed": "19,426",
      "unemploymentPercent": 5.6
    },
    {
      "state": "Arizona",
      "totalUnemployed": "196,793",
      "unemploymentPercent": 5.5
    }
  ]
  </code></pre>
  
  <p>If there is a simpler alternative than react-chartjs-2 I am open to changing my approach. I've also been looking at potential alternatives such as <strong><a href="https://react-google-charts.com/geo-chart#region-geocharts" rel="nofollow noreferrer">react-geo-charts</a></strong> and <strong><a href="https://www.react-simple-maps.io/" rel="nofollow noreferrer">react-simple-maps</a></strong>. Thanks!</p>