Bugfix: Double rendering of labels

src/modules/TimeScale.js

@@ -619,7 +619,7 @@ class TimeScale {
 
     let firstTickPosition = remainingMins * minutesWidthOnXAxis
     let firstTickValue = firstVal.minHour + 1
-    let hour = firstTickValue + 1
+    let hour = firstTickValue
 
     if (remainingMins === 60) {
       firstTickPosition = 0
@@ -629,7 +629,17 @@ class TimeScale {
 
     let date = currentDate
 
-    let month = changeMonth(date, currentMonth)
+    // we need to apply date switching logic here as well, to avoid duplicated labels
+    if (hour >= 24) {
+      hour = 0
+      date += 1
+      unit = 'day'
+    }
+
+    const checkNextMonth = changeDate(date, currentMonth)
+
+    let month = checkNextMonth.month
+    month = changeMonth(date, month)
 
     // push the first tick in the array
     this.timeScaleArray.push({
@@ -642,6 +652,8 @@ class TimeScale {
       month: Utils.monthMod(month)
     })
 
+    hour++
+
     let pos = firstTickPosition
     // keep drawing rest of the ticks
     for (let i = 0; i < numberOfHours; i++) {

tests/unit/timescale.spec.js

@@ -416,6 +416,54 @@ describe('Generate TimeScale', () => {
       )
     }
   })
+
+  it.each([...Array(24).keys()].map((hour) => ({ hour: hour + 1 })))(
+    'should generate an formatted hourly timescale with unique ticks starting on hour $hour:00',
+    ({ hour }) => {
+      const chart = createChartWithOptions({
+        series: [
+          {
+            type: 'line',
+            data: [
+              {
+                data: [...Array(9).keys()],
+              },
+            ],
+          },
+        ],
+        chart: {
+          type: 'line',
+        },
+        xaxis: {
+          type: 'datetime',
+          labels: {
+            format: 'HH:mm',
+            datetimeUTC: false,
+          },
+        },
+      })
+      const timeScale = new TimeScale(chart)
+      timeScale.generateHourScale({
+        firstVal: {
+          minSecond: 0,
+          minMinute: 0,
+          minHour: hour,
+        },
+        currentDate: 22,
+        currentMonth: 11,
+        currentYear: 2022,
+        minutesWidthOnXAxis: 0.4,
+        numberOfHours: 8,
+      })
+
+      const generatedScale = timeScale.timeScaleArray
+      const formattedScale = timeScale.formatDates(generatedScale)
+      const scaleValues = formattedScale.map((gs) => gs.value)
+      expect(scaleValues.map((gs) => gs.value).length).toEqual(
+        new Set(scaleValues).size
+      )
+    }
+  )
 })
 
 describe('createRawDateString', () => {