Line chart - labels on the x axis not rendering properly

[ortigozamatias]

Hi! I have a line chart whose x axis is of datetime type, showing a formatted hour. The problem is that the last label is not showing itself complete.

I've tried to avoid using any padding or margin but haven't found a solution so far.

Here is the code for the chart:

export default memo(function LineChart(props) {
    const maxY = useMemo(() => max(props.data) + 1);
    const chartOptions = {
        options: {
            plotOptions: { line: { curve: 'smooth' } },
            chart: {
                animations: { speed: 1500 },
                toolbar: {
                    tools: {
                        download: false,
                        selection: true,
                        zoom: '<img src="/icons/zoom_in.svg" width="20">',
                        zoomin: '<img src="/icons/plus_circle.svg" width="20">',
                        zoomout: '<img src="/icons/minus_circle.svg" width="20">',
                        pan: '<img src="/icons/grab.svg" width="20">',
                        reset: '<img src="/icons/home.svg" width="20">'
                    },
                    autoSelected: 'zoom'
                },
            },
            colors: [colors.contentBackground],
            stroke: {
                width: 5,
                curve: 'smooth'
            },
            xaxis: {
                type: props.type,
                labels: {
                    style: { colors: colors.contentBackground },
                    formatter: value => {
                        const categoryTime = new Date(value);
                        const hours = categoryTime.getHours();
                        const minutes = categoryTime.getMinutes();
                        const minutesString = minutes === 0
                            ? `${minutes}0`
                            : minutes < 10
                                ? `0${minutes}`
                                : minutes;
                        const seconds = categoryTime.getSeconds();
                        const secondsString = seconds === 0
                            ? `${seconds}0`
                            : seconds < 10
                                ? `0${seconds}`
                                : seconds;

                        return `${hours}:${minutesString}:${secondsString}`;
                    }
                },
                axisBorder: { color: colors.contentBackground },
                axisTicks: { color: colors.contentBackground },
                tooltip: { enabled: false },
                crosshairs: { stroke: { color: colors.darkGreen } },
                categories: props.categories
            },
            tooltip: { x: { format: 'dd MMM HH:mm:ss' } },
            yaxis: {
                min: 0,
                max: maxY,
                labels: { style: { color: colors.contentBackground } },
                axisBorder: { color: colors.contentBackground },
                axisTicks: { color: colors.contentBackground },
            },
            markers: {
                size: 4,
                opacity: 1,
                colors: [colors.contentBackground],
                strokeWidth: 0,
                hover: { size: 7 }
            }
        },
        series: [{
            name: props.dataName,
            data: props.data
        }]
    };

    return <Chart options={chartOptions.options} series={chartOptions.series} type="line" height={props.height} />;
});

Here is the data and categories payload:

Thanks!

[junedchhipa]

Closing this as it is a duplicate of #305
I will take a look soon.