Improve line graphs on responsive mobile view
I have tried to looking for best practices on charts, especially line graphs viewed on mobile devices and seems like there isn't much information about it. This is my first project involving charts displayed on mobile devices. I have made prototypes for the desktop and mobile versions and would like some feedback to improve the mobile version if possible.
The chart below is for desktops and tablets. There are quite a number of interactions on this screen as users can quickly access
different metrics (tabs below the chart title)
different time periods (tabs below the chart)
The number of dots plotted can differ; some charts can have a lot of data.
Below are my prototype solutions for Mobile version:
Maintain height of the chart, and adjust the width of the chart to fit on the x-axis of the chart
Make the chart scrollable on x-axis so that the dots are not squeezed together.
Just resize down accordingly (I don't this can work as a solution, just putting out here to hear thoughts).