react-d3-speedometer | React Speedometer component using d3.js ⚛️ | Data Visualization library

https://blog.heroku.com/deploying-react-with-zero-configuration

Hey did you go through this? I think if you're using the Heroku CLI you need to add the -b tag during deployment to add the custom build pack.

Also it's similar to this question React app crashes on Heroku after using npm install

Edit: So I tried to deploy a sample react app to heroku and came up with a similar issue. The issue is that when you use Create-react-app to generate the react app it automatically adds build configurations. Now heroku builds the app and tries to serve the built app. Hence it will not be able to route the application as expected. To solve this you will have to either use a build pack along with the project that tells heroku how to serve the files or you will have to separate the backend and the frontend (frontend-react and backend express server using node.).

Reference - https://github.com/mars/create-react-app-buildpack#usage https://github.com/mars/heroku-cra-node

Edit 2: added some quotes as suggested by @IvanAracki

Thanks to the zero-config foundation of create-react-app, the idea of zero-config deployment seemed within reach. Since these new apps all share a common, implicit architecture, the build process can be automated and then served with intelligent defaults. So, we created this community buildpack to experiment with no-configuration deployment to Heroku.

It looks like your green arrow has not a reference. For instance the parent element has not a position declared. Try something like:

Use Below style and add in your CSS file

It's difficult to say exactly why you have gotten this error, but if you remove the node_modules directory and reinstall every dependency it should work as expected.

According to the answer on that issue it's not doable: Is it possible to set label on segments

Currently the labels are automatically calculated based on maxValue, 'minValue' and segments. This may not be possible at all, as per the library functionality, there will be 5 values for your chart instead of 4 you have mentioned. I'm afraid this is not possible at all as far as I see. So I'm closing this issue.

There are many libraries that draw charts but each of them comes with its limitations, for my projects I ended up implementing the charts by myself, it's not so hard and lets you do exactly what you need without suffering the quirks.

Here is some code I extracted from my ReactPie component, it draws a PieSegment so you could use that to create a similar result than the gauge pretty easily. You can try it in that pen: https://codepen.io/leefsmp/pen/dJjpXx