Chart Variable Timeline X-Axis

X-axis can be adjusted via msg.ui_control.options. By reading your requirements I can't really give strong advise but you probably need to do a bunch of experiments. See this thread to find examples and maybe to get things going Help to Change X- Axis Value
And here is the link to the docs of charts https://www.chartjs.org/docs/latest/charts/line.html