trying to get minIndex and maxIndex from x-axis-0 - chart.js

Question

I'm attempting to capture data as shown in this question Chart.js get array of currently visible points on graph and am getting most of the way there. However, in inspecting the properties of my x-axis-0, I'm not locating minIndex or maxIndex as detailed in the thread. I do have max and min properties, but those do not appear to work for slicing, as far as my attempts have gone. Curious if those more expert in chartjs can help me figure out the minIndex and maxIndex variables.
editing for more detail:
So I think maybe the issue is that in the link provided, the example is using categorical data and in my own example I have the xaxis as time data? I tried jsfiddle and I see minIndex and maxIndex on the category type whereas I don't see those in my time type axis.
I see the following when I do a console log of the x-axis-0
n {id: "x-axis-0", type: "time", options: {…}, ctx:
CanvasRenderingContext2D, chart: en, …}
bottom: 475
chart: en {id: 0, ctx: CanvasRenderingContext2D, canvas: canvas#myChart.chartjs-render-monitor, config: {…}, width: 1110, …}
ctx: CanvasRenderingContext2D {canvas: canvas#myChart.chartjs-render-monitor, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}
fullWidth: false
height: 15.76
hidden: false
id: "x-axis-0"
labelRotation: 0
left: 35.781484375
longestLabelWidth: 0
longestTextCache: {normal 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif: {…}}
margins: {left: 35.781484375, right: 3, top: 0, bottom: 0}
max: 1614922685400.2363
maxHeight: 237.5
maxWidth: 1074.218515625
min: 1614922568591.0784
minSize: {width: 1074.218515625, height: 15.76}
options: {display: true, position: "bottom", offset: false, gridLines: {…}, scaleLabel: {…}, …}
paddingBottom: 0
paddingLeft: 3
paddingRight: 3
paddingTop: 0
position: "bottom"
right: 1107
ticks: []
top: 459.24
type: "time"
weight: 0
width: 1071.218515625
_adapter: rn {options: {…}}
_endPixel: 1107
_gridLineItems: [ticksLength: 0, borderValue: 459.5]
_labelItems: []
_labelSizes: {first: {…}, last: {…}, widest: {…}, highest: {…}}
_layers: ƒ ()
_length: 1071.218515625
_majorUnit: undefined
_maxLabelLines: 0
_offsets: {start: 0, end: 0, factor: 1}
_reversePixels: false
_startPixel: 35.781484375
_table: (2) [{…}, {…}]
_ticks: []
_ticksToDraw: []
_timestamps: {data: Array(3601), datasets: Array(2), labels: Array(3616)}
_unit: "hour"
__proto__: n
edit 2:
I created a jfiddle for this https://jsfiddle.net/d489uesh/ Just for experimenting I did a console log for the value of minIndex and it appears to only be 0 or 1, and it does not work at all if I use time as the type of axis. The end goal of all of this is to use the array of retrieved y-values to calculate an average for the drag highlight zoom selection, I feel like I'm so close, so appreciate any assistance!

Answer 1

As you have mentioned, console log of the x-axis-0 does not have the min and max index. I was working in a project that requires almost identical solution to yours hence had to find a way around.
I added the moment.min.js and added time type to x-axis because drag zoom doesn't seem to work without it:
type: 'time',
time: { parser: 'HH:mm:ss', displayFormats: { second: "HH:mm:ss" } },
I got the first and last value from chart.scales["x-axis-0"].ticks after zoom and got the desired min and max index from chart.data.labels and the rest was easy.
var data = chart.data.labels;
var l = chart.scales["x-axis-0"].ticks;
l = l.length -1;
var min = data.indexOf(chart.scales["x-axis-0"].ticks[0]);
var max = data.indexOf(chart.scales["x-axis-0"].ticks[l]);
document.getElementById("vv").innerText = JSON.stringify(chart.data.datasets[0].data.slice(min, max +1));
Here is the jsfiddle:
https://jsfiddle.net/ModeNashid/84zuqwLa/3/
Note that I did not check the versions of any of the resources that you have included in your jsfiddle so there might be some warnings.