react-c3js | React component for C3.js | Frontend Utils library

Your code isn't working because you are not handling the Javascript for the toggling of the Modal correctly. React is a Javascript library, if you are using it take full advantage of it.

You do not need to pass data-toggle attributes in your HTML. You don't want to use straight up HTML like that if you are using React. You want to create a Modal functional component and use JSX. Convert your modal HTML into a React functional component that accepts isOpen and has a onClose method.

There isn't a one size fits all solution to your issue here. You can approach this in a couple ways. You could create a Modal component on tap on the shoulders of a library to do the heavy lifting for you. I strongly recommend the latter since you are new. Then play around with building your own component yourself.

Two libraries that are popular with React are Material UI or Reactstrap.

You can read up on Material UI here: https://material-ui.com/. And Reactstrap here: https://reactstrap.github.io/

These libraries have a ton of Bootstrap goodies that you can play around with in your application.

Here's an example of how you could use Reactstrap in you component to get started.

Add Reactstrap to your project. Using npm: npm i reactstrap react-dom or using yarn: yarn add reactstrap react-dom. I assume you have bootstrap installed as well since you are using the bootstrap classes. You should be good to go to start using reactstrap at this point.

Updating CarPark Component

Here is a possible approach. The onrendered() event of the chart is used to run some JS that uses d3.js (already present as you are using c3.js) to target the grid-line text and manipulate it as required. See the red text 'Label 2' and 'LABEL4'.

I did reasonable research on a CSS solution but my conclusion is that the CSS approach will be problematic as the interface between CSS and SVG attributes is inconsistent at time of writing. The JS solution seems viable.

Someone gave me the following solution, and it works for me. The solution was to change the type of x-axis from category to linear and to specify the x data: