'Zoom-in empty area (non-market days) on timeseries financial bar Chart.js

I've tried to plotting financial chart and I have some problems with zoomed chart without data (non-market days). So, first my problem was showing 2 parts of chart (friday and monday) together - solved by type: 'timeseries', it's ok.

But, if i want to zoom-in or paning, and one of sides is hidden by chart frame (e.g. 11:55p.m. on left side and 12:00a.m. on right side) - empty area is visible;

Rigtht side

Left side

When both parts of these sides are in the frame (I mean that left side max value (11:55p.m.) is chart.scales.x.min and left side min value (12:00a.m.) is chart.scales.x.max) - timeseries is working: Both sides

Cause of this free space I should to zoom-out to see both sides and chart will be monolite. But of this zoom candlesticks are thin. I know about datasets rule for bars e.g. barThinkness: 'flex', but I shouldn't use it on my project, because all bars should be default size. More of this, last bar of the left side and first bar of the right side are very big, they took all empty space (non-market days). I lost 5 days to find issue in chart.js and chartjs-plugin-zoom libs. And on my opnion, the bug is in the plotting xAxes by default methods in this lib. Please, help me. And sorry for my english =)

Here is my code example:

packaje.json

"vue": "~3.2.19",
"chart.js": "~3.7.0",
"chartjs-adapter-moment": "~1.0.0",
"chartjs-chart-financial": "chartjs/chartjs-chart-financial#v0.1.1",
"chartjs-plugin-annotation": "~1.2.1",
"chartjs-plugin-streaming": "~2.0.0",
"chartjs-plugin-zoom": "~1.2.1",

functions for chart options

const getInitScale = () => {
  const data = unref(dataItems);
  const min = data[0].x;
  const max = data[data.length - 1].x;
  return { min, max };
};

const setScaleLimits = () => {
  Object.assign(chartScaleLimits, {
    min: chartData.datasets[0].data[0].x,
    max: chartData.datasets[0].data.slice(-1)[0].x,
  });
};

const chartScaleLimits = reactive({
  min: 0,
  max: 0,
});

setScaleLimits();

chart options

plugins: {
    zoom: {
        pan: {
            onPan: onXZoomPan,
            enabled: isPan as unknown as boolean,
            mode: panMode as unknown as 'x' | 'y' | 'xy',
        },
        limits: {
            x: {
                chartScaleLimits,
            },
        },
        zoom: {
            onZoom: onZoomHandler,
            wheel: {
                enabled: true,
                speed: 0.01,
            },
            pinch: {
                enabled: true,
            },
            mode: scaleMode as unknown as 'x' | 'y' | 'xy',
        },
    },
},
scales: {
    x: {
        bounds: 'data',
            type: 'timeseries',
                time: {
            stepSize: 5,
                displayFormats: {
                second: 'HH:mm:ss',
                    minute: 'HH:mm',
                        day: 'MMM D ddd',
          },
            unit: 'minute',
        },
        ticks: {
            source: 'data',
        },
        min: getInitScale().min,
            max: getInitScale().max,
     },
    y: {
        position: 'right',
            beginAtZero: false,
     },
},

piece of json data, where the problem is

{
    "time": 1651265100,
    "open": 1.05437,
    "high": 1.0546,
    "low": 1.05423,
    "close": 1.05442
},
{
    "time": 1651265400,
    "open": 1.05444,
    "high": 1.05472,
    "low": 1.05434,
    "close": 1.05461
},
{
    "time": ** 1651265700 **,
    "open": 1.0546,
    "high": 1.05478,
    "low": 1.05409,
    "close": 1.05452
},
{
    "time": ** 1651438800 **,
    "open": 1.05497,
    "high": 1.05612,
    "low": 1.05497,
    "close": 1.05536
},
{
    "time": 1651439100,
    "open": 1.05536,
    "high": 1.05547,
    "low": 1.05404,
    "close": 1.05423
},
{
    "time": 1651439400,
    "open": 1.05423,
    "high": 1.05467,
    "low": 1.05402,
    "close": 1.05402
},


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source