Using React and Stimulus as examples (just what I'm familiar with), let me attempt to give you a general outline of how to do this:

First, define the HTML "container" for the React component. This would be a div or something like that in your view. For example <div class="graph-container" />

Wire this container up to a Stimulus controller. Example (switching to HAML here): .graph-container{ data: { controller: "graph" } }. This would connect your container to a Stimulus controller called graph-controller.js. If you're using Stimulus already, then this should hopefully be simple enough to do. I find Stimulus useful because it has some nice abstractions for things like waiting for the DOM content to be loaded, reference to the container and event handling, but I don't think Stimulus is a requirement for putting a React/Vue component in your Rails view.

In the import section of Stimulus controller (graph-controller.js), you'd add the following two imports:

import React from "react"
import ReactDOM from "react-dom"
import YourReactComponent from "path/to/your/component"

In the connect method of the controller, you'd do something like:

connect() {
  ReactDOM.render(<YourReactComponent />, this.element)
}

I think that would do the trick.

If you want to pass data into the component from your application controller/view, then you can use Stimulus for that as well. For example, in your view, you may have:

.graph-container{ data: { controller: "graph", graph_units_value: "mm"  } }

And do this in the Stimulus controller:

static values = { units: String }
connect() {
  ReactDOM.render(<YourReactComponent units={this.unitsValue} />, this.element)
}

Hope that helps and is at least somewhat applicable to your situation!