The data feels like it is more suitable to be displayed in a table rather than a chart as pointed out by Devin. The actual data look like they are boolean values, so you can replace the red bar (a little bit too striking in terms of visual impact) with an appropriate letter or symbol/icon, which will certainly help to reduce space.
There's not much you can do if you insist on showing the whole timeline because it is impossible to design for an infinite or unlimited amount of data. But if this is not a requirement then I can offer you some alternate strategies to consider:
- Filter on periods or date ranges to limit the width of the display, but you have the problem of scaling the display to deal with
- Show a fixed length of time, but you have to work out whether it is worth the pain of doing pagination on mobile
- Allow users to zoom in or out of time periods, but the interaction patterns can be tricky to do on mobile
What I actually think is most important in the context of the information that is on the screen is not so much seeing the whole picture, but highlighting periods when there is a change in the pattern or values for the individuals. So I would actually redesign the mobile view to look something more like this:
name | [date of last YES boolean value] [date of last NO boolean value]
name | [date of last YES boolean value] [date of last NO boolean value]
name | [date of last YES boolean value] [date of last NO boolean value]