Is it possible to implement such a chart with Chart.js?

[mycreatz]

I'm learning Chart.js and implementing serveral unique types of charts. I also found some workarounds in that discussion, which finally allowed me to implement a chart with a mix of bubble and bar.

This time, I'm trying to draw this type of chart, but is it actually possible to implement it with Chart.js?

I want to draw a chart that expresses multiple trajectories Arc through multiple coordinate values of X and Y. I checked something similar in D3.js, but I want to know if it is possible enough in Chart.js.

Wouldn't be implemented as a Scatter or Line chart? I'm thinking that.

How about this?

[Udemology]

That is a nice chart.

Looking at the scales a scatter chart might be better. Primarily because a line chart only works with 1 data point and displays the labels on the x scale.

With a scatter chart you can apply the [x, y] coordinates which is what you need to draw the line. In Chart.js the scatter chart has the option to 'showLine's. To get this done you will need a plugin / custom solution.

Just a question regarding to the 3-wood green lines. Do you need to all 3 to lighten up onhover? Or only the ones that would intersect onhover?

[mycreatz]

On hover, we want only the line for the 3-wood to be highlighted. Do plugins or custom solutions need to be implemented separately other than showLine?

[Udemology]

Finally figured out how to do the rotation. Took awhile but no idea if this is still needed. https://youtu.be/IMC-RTeJph8

Will look into the clickable effect in tooltip.