Using React Google Charts

While working on a financial tracking application, I realized I need some way to display all of that data. So began my search for a chart library, after trying out a few, and stumbling my way upon a library that cost over $200. I finally settled on using React Google Charts.

While certainly not as robust or flashy as many other libraries, it had one thing that others didn't; it was free, and I could actually figure out how to use it.

The link above will take you to the official website, where there are plenty of examples, a quick guide to get you started, more examples, info on component props, and many, many, many examples.

If you're anything like me, you like examples because instead of actually learning how stuff works, you can simply copy an already existing one that's close enough, and adjust it to your liking (or adjust it as best you can since you don't know how anything works).

(huge shoutout to this Gradient Generator, it's pretty great for generating color gradients, color schemes, and all of your color needs)

<Chart
          chartType="PieChart"
          width="100%"
          height="400px"
          data={budgetPieData}
          options={{
            pieSliceText: "none",
            pieHole: 0.6,
            backgroundColor: "none",
            colors: [
              "#26cd4d",
              "#00c065",
              "#00b377",
              "#00a483",
              "#00958a",
              "#00858b",
              "#007685",
              "#00667b",
              "#0f576b",
              "#2a4858",
              "#28687d",
              "#168ba0",
              "#00b0be",
              "#00d6d6",
              "#05fce8",
              "#00fed9",
              "#00ffc6",
              "#00ffb0",
              "#00ff96",
              "#00ff78",
            ],
          }}
        />

While it is certainly functional, and gives a fair amount of customizability, I did find that it became increasingly difficult to work with the more complex my needs (formatting data for stacked Column Charts is a bit of a nightmare), but I found that it overall worked out good enough.

Have you used React Google Charts? Do you know of something even better? I would definitely love to hear about it; but in the mean time, good luck and get coding!