Dual Axis Line chart like robinhood

I want to design an exact similar line chart but a dual axis line chart just like this robinhood website. I have tried to connect with many different developers but most of them are missing on one of two points like the ruler or the Ui or the animations etc.

I would request you to please guide me regarding the same or if there is one readily available then i can use the same for my website. Also i want to add this feature to the chart as shown in the second image.

The highlighted yellow bars and what are they called and how to customise the same.

Really looking forward for some support.


Be warned: people seem to dislike dual access charts :stuck_out_tongue:

Probably the easiest starting point is the C3.js library. One of my first attempts with Observable was to implement such a dual access chart. It turned out to be pretty easy!

1 Like

Aaron shared a great solution, and I’ll offer one more -

These are experimental solutions with Plot that you can test out. There are a few variations. As Aaron noted, people generally dislike dual axes charts, as they’re considered hard to read and easy to mislead. There’s a good write-up here about it, with alternative solutions. Personally, I think the alternate solution using indexing is quite effective.

This is the first stage that i want to show on the chart. I need the vertical ruler line and the tooltip just like robinhood chart.