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.
Be warned: people seem to dislike dual access charts
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!
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.
Went with Plot but I also found this VegaLite dual-axis example using area charts which actually kind of matched the data I was wanting to try a dual axis chart with (temperature + CO2):
Apologies in advance and gratitude for the writeup to Lisa
Found another alternative approach from the Weather Strip app which I’m not sure Lisa’s DataWrapper writeup mentioned: just put the values in labels at every tick so there is no confusing axis scale guide:
