Broken render on Brave (Chrome) browser?

[DavidGarciaCat]

Expected behavior

I would expect to see the rendered chart in the same way it's rendered on Firefox or Safari

Safari example:

Firefox example:

Current behavior

Legend and Axes length/space is being ignored

Brave (Chrome) example:

Reproducible sample

( code sample below - data provided through AJAX/JSON call )

Optional extra steps/info to reproduce

Chart.js is being included through CDN

https://cdn.jsdelivr.net/npm/chart.js

And I use this code

    $(function () {
        const usersCountOverTimeChartJsonData = $.ajax('/admin/stats/users/count', {
            'type': 'GET',
            'dataType': 'json',
            'success': function (data) {
                const usersCountOverTimeChartLabels = [];
                const usersCountOverTimeChartDataSetActivated = [];
                const usersCountOverTimeChartDataSetPending = [];

                $.each(data, function(month, values) {
                    usersCountOverTimeChartLabels.push(month);
                    usersCountOverTimeChartDataSetActivated.push(values.activated);
                    usersCountOverTimeChartDataSetPending.push(values.pending);
                });

                const usersCountOverTimeChartData = {
                    labels: usersCountOverTimeChartLabels,
                    datasets: [{
                        label: 'Activated',
                        backgroundColor: 'rgb(58, 110, 165)',
                        borderColor: 'rgb(58, 110, 165)',
                        data: usersCountOverTimeChartDataSetActivated,
                    },{
                        label: 'Activation Pending',
                        backgroundColor: 'rgb(224, 151, 0)',
                        borderColor: 'rgb(224, 151, 0)',
                        data: usersCountOverTimeChartDataSetPending,
                    }]
                };

                const usersCountOverTimeChartConfig = {
                    type: 'line',
                    data: usersCountOverTimeChartData,
                    options: { plugins: { legend: { position: 'bottom' } } }
                };

                const usersCountOverTimeChart = new Chart(
                    document.getElementById('usersCountOverTimeChart'),
                    usersCountOverTimeChartConfig
                );
            },
        });
    });

Possible solution

No response

Context

No response

chart.js version

v3.8.2

Browser name and version

Brave - Version 1.41.100 Chromium: 103.0.5060.134 (Official Build) (arm64)

Link to your project

No response

[kurkle]

Duplicate of #6411

[DavidGarciaCat]

Hi @kurkle

Based on the last comments in #6411 the issue might be related to browsing through the IP address instead of a hostname (unless I missed anything else).

If so, I can assure you the issue is happening by browsing via hostname, both on localhost and production website.

Also, that issue is closed, so I don't know how I am supposed to make it work, assuming no further commits to fix it will occur.

Finally, my example is not just related to the tooltip (as mentioned in the other issue) but the whole chart as a unit.

If you can provide further feedback, please, it will be highly appreciated.

Thanks,

[DavidGarciaCat]

Further reading on related issues too, mentioned in that one.
I see what you mean, and why it's now closed.