javascriptreactjsd3.jsbar-chartrecharts
How can I draw chart between 2 categories (strings) using recharts library
I want to draw a BarChart using recharts library but the quantities on both axis are strings/variables e.g.
[
{y: 'medium', x:'P'},
{y: 'high', x:'Y'},
{y: 'low', x:'SS'},
{y: 'medium', x:'DD'},
{y: 'very high', x:'NN'},
]
The height of bars corresponds to the relevant value on y axis, you can see example in attached jpg, by default recharts doesn't support strings/variables on both axis as library determines height based on some numerical value How can I achieve this
Solution
If you know all available y values you can convert them to number values
I wrote small example with conversion, custom colors and labels
https://codesandbox.io/s/simple-line-chart-forked-rbe56s?file=/src/App.tsx
- How to remove "chrome is being controlled by automated test software" selenium javascript
- How to add text to a pop up window in Javascript?
- Using addEventListener and getElementsByClassName to pass an element id
- 'getDoc' is not exported from 'firebase/firestore'
- Find all elements with an 'id' attribute on the DOM
- I have a button that increment a counter when users click on it, but I want to delay the updating process if users click really fast
- rendering dropdown dynamically vue.js
- XForms Refresh not working? (XSLTForms 1.7)
- Why won't a simple image load in Phaser in the browser?
- Counting cells with a specific class in JavaScript
- How to join / combine two arrays to concatenate into one array?
- Execution order of GS files in a Project
- TypeScript Type-safe Omit Function
- how can i change html input to change to decimal when pressing comma while typing
- HTML5 enable Previous/Next track when playing Video/Audio
- Is there a way to get the JSX/TSX of a React component from the code itself?
- Imitate webserver for tests with Jest
- Check if IndexedDB database exists
- How do you mix the conditional operator ( ? : ) and deconstructed function returns?
- Use API to autofill form options?
- Display JavaScript Fetch for JsonResponse 2 Tables on HTML
- How to count number of social shares on web page locally
- How do I fix CORS issue in Fetch API
- Firebase Cloud Functions: Difference between onRequest and onCall
- Model.create is not a function - strapi
- Button in a table cell to open a modal dialog
- File API - Blob to JSON
- How to check if a variable is a blob in JavaScript
- Where to save a JWT in a browser-based application and how to use it
- React Native <Modal /> onDismiss not invoked