chartjs/Chart.js

Legend title does not fit

BSarmady opened this issue · 1 comments

BSarmady commented

First of all Documentation is still very annoying.
You just need to put a complete HTML file in there so people can have all the parts together. Anyone with basic knowledge of HTML,CSS,Javascript should be able to understand it. With the way that you have arranged your documentation, first you need top open 5 different pages to setup a working sample, then go to example pages and try to figure out which one of those chunks of codes goes where! This has been pointed out so many times.
Also in getting started only specifies use of CDN, but when even using cdn with version umd version should be used and not just chart.min.js version like any other library. cdnjs.com also does not have all the versions that are available in jsdelivr.com

ISSUE ITSELF

This issue not only applies to latest version of the Chart.JS (4.3.3 at the moment) but all the versions above 3.
Previously it was possible to get around this issue using generateLegend() function which was removed. The replacement method HTML Legend is to complicated and since the example is split in chunks with some missing and due to use of framework in examples, view source in browser wont work help to find what's going on either.

Following is a simple page that will show the problem (in screenshot too), I have tested this against all the versions from 4.2.1 up to 4.3.3

<!DOCTYPE html>
<html>
<head>
    <script src="../assets/plugins/chart.js@4.2.2/chart.min.js"></script>
</head>
<body>
    <canvas id="pieChart" style="max-width: 980px; max-height: 340px; padding:10pt;border: 1px solid #000000"></canvas>
    <script type="text/javascript">

        const config = {
            type: 'doughnut',
            data: {
                labels: ['ABC', 'DEF'],
                datasets: [{ data: [50.00, 10.00,] },]
            },
            options: {
                plugins: {
                    legend: {
                        title: {
                            text: function () { return '4ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ'; },
                            display: true,
                        },
                        position: 'left'
                    }
                }
            },
        };

        let pie_chart = new Chart(document.getElementById("pieChart"), config);
    </script>
</body>
</html>

As you can see in following screenshot, the legend title is trimmed from both side. I could not find a property or method to fix this issue.

image

BSarmady commented

Note that there is enough space to show entire title of legend and push the chart to right, but I can't find any configuration allowing me to do that.