Горизонтальная гистограмма со временем: всплывающая подсказка работает только с последним элементом ⇐ Javascript

[Гость]

Сейчас я пытаюсь воссоздать машинную временную шкалу, используяchart-js и импульс. Текущее состояние уже похоже на исходное, но есть некоторые моменты, которые работают не так, как ожидалось.
[*]подсказка отображается только для последней панели (справа) [*]В легенде показаны три состояния, но каждый из них следует показывать только один раз.
рабочий пример https://codepen.io/tulipuser/pen/PoXmRQR

Ожидаемый результат:



Как показано на изображении, каждое состояние должно быть видно один раз. И каждая подсказка должна работать, а не только последняя.

var ctx = document.getElementById("myChart"); вар myChart = новая диаграмма (ctx, { тип: 'бар', данные: { метки: ['Статус'], наборы данных: [{label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-01T08:56:26.000Z',y:0} ]}, {label:'IDLE',borderWidth:1,backgroundColor:'rgba(233,157,82,1)',data:[{x:'2023-09-01T09:39:12.000Z',y:1}]}, {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-01T09:42:44.000Z',y:2}]}, {label:'STOPPED',borderWidth:1,backgroundColor:'rgba(212,29,29,1)',data:[{x:'2023-09-01T10:00:11.000Z',y:3}] }, {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-01T12:30:00.000Z',y:4}]}, {label:'IDLE',borderWidth:1,backgroundColor:'rgba(233,157,82,1)',data:[{x:'2023-09-01T12:55:23.000Z',y:5}]}, {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-01T19:00:12.000Z',y:6}]}, {label:'IDLE',borderWidth:1,backgroundColor:'rgba(233,157,82,1)',data:[{x:'2023-09-01T21:12:45.000Z',y:7}]}, {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-02T02:12:12.000Z',y:8}]}] , }, параметры: { отзывчивый: правда, Весы: { Икс: { сложено: ложь, мин: '2023-09-01T08:56:26.000Z', //OP "min: moment().startOf('day').subtract(11, 'day')" работал только в первый день тип: «время», время: { единица измерения: 'минута', форматы дисплея: { час: 'Ч:мм' }, } }, й: { сложено: правда } }, индексная ось: 'y', } }); .myChartDiv { максимальная ширина: 600 пикселей; максимальная высота: 400 пикселей; < /скрипт>