Graph interpolation in dashboard. Strange results

__Steps to reproduce:__
List the minimal actions needed to reproduce the behavior.

1. Have a dataset with 5s interval data (continuously rising large (1.2M) number in my case)
2. Query this data:
from(bucket: "FirstBucket")
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|> filter(fn: (r) => r["_measurement"] == "mqtt_consumer")
|> filter(fn: (r) => r["topic"] == "Counters/Watermeter 1")
|> filter(fn: (r) => r["_field"] == "Counter")
3. The default graph over a 15m period is a smooth line that is rising continuously

__Expected behavior:__
When I switch the graph to: "options --> interpolation --> step" I would expect the graph to be roughly the same as linear interpolation but with a ragged appearance due to stepped interpolation (1 step every 5s)

__Actual behavior:__
The graph changes to one big step. When I hover the cursor over the graph the popup window appears at the correct datapoints and displays correct information but the graph does not align with the datapoints.

__Environment info:__

* System info: Run `uname -srm` and copy the output here
Don't know. I'm running InfluxD on a Windows 10 system.
* InfluxDB version: Run `influxd version` and copy the output here
InfluxDB 2.1.1 (git: 657e1839de) build_date: 2021-11-09T03:03:48Z
* Other relevant environment details: Container runtime, disk info, etc

__Config:__
Default config

Reproduce the issue with the supplied Flux query over a 15-minute range and compare the dashboard's linear and step interpolation settings. Trace the dashboard graph interpolation entry point, then verify that step mode renders a separate step for each 5-second datapoint and remains aligned with the hover values.

Written by the indexing model from the issue text.