let chart_options =
       {
           title: "Schuetz Graph",
           width: this.width,
           height: this.heigth,
           cursor: {
               points: {
                   one: true
               },
               focus: {
                   prox: 30
               }
           },
           plugins: [drawAlarmLines(() => this.alarmThreshold, () => this.dynamicThreshold)],
           scales: {
               x: {
                   time: false,
                   auto: false,
                   min: 0,
                   max: this.scrollWindowSize - 1,
               },
               y: {
                   auto: false,
                   min: this.Y_MIN,
                   max: this.alarmThreshold,
                   range: (): [number, number] => {
                       return [this.Y_MIN, this.alarmThreshold];
                   }
               }
           },
           drag: {
               scale: false
           },
           series: [
               {},
               {
                   show: true,
                   stroke: (u, seriesIdx) => {
                       return this.firstSeriesColor;
                   },
                   scale: "y",
                   label: "ppm",
                   width: 2,
                   points: {
                       show: false,
                   },
               },
               {
                   show: true,
                   stroke: (u, seriesIdx) => {
                       return this.secondSeriesColor;
                   },
                   scale: "y",
                   label: "ppm",
                   width: 2,
                   points: {
                       show: false,
                   },
               },
               {
                   show: true,
                   stroke: (u, seriesIdx) => {
                       return this.thirdSeriesColor;
                   },
                   scale: "y",
                   label: "ppm",
                   width: 2,
                   points: {
                       show: false,
                   },
               }
           ],
           axes: [
               {
                   grid: {
                       show: false,
                   },
                   show: false,
               },
               {
                   grid: { show: false },
               },
           ],
           legend: {
               show: false,
           }
       }
       let chartDiv = document.getElementById("chart")!;
       this.chart = new uPlot(chart_options, [[0], [0], [0], [0]], chartDiv);

private initializeScrollbar() {
        if (!this.scrollBar) {
            this.scrollBar = document.getElementById("xScrollbar") as HTMLInputElement;
            if (!this.scrollBar) return;
            this.scrollBar.addEventListener("input", () => {
                this.updateVisibleWindow(parseInt(this.scrollBar!.value));
            });
        }
        if (!this.routeData?.xTicks) return;
        const totalLength = this.routeData.xTicks.length;
        const maxScrollStart = Math.max(0, totalLength - this.scrollWindowSize);
        console.log("init", totalLength, maxScrollStart);
        this.scrollBar.min = "0";
        this.scrollBar.max = maxScrollStart.toString();
        this.scrollBar.value = "0";
        this.updateVisibleWindow(0);
    }

 private updateVisibleWindow(startIndex: number) {
        if (!this.routeData?.xTicks) return;
        const xTicks = this.routeData.xTicks;
        const totalLength = xTicks.length;
        const endIndex = Math.min(startIndex + this.scrollWindowSize - 1, totalLength - 1);
        const minX = xTicks[startIndex];
        const maxX = xTicks[endIndex];
        this.chart.setScale("x", { min: minX, max: maxX });
        console.log("scale", minX, maxX);
        console.log("x scale AFTER setScale:", this.chart.scales.x);
        this.chart.redraw();
    }