Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Legend title does not fit #11850

Open
BSarmady opened this issue Aug 5, 2024 · 1 comment
Open

Legend title does not fit #11850

BSarmady opened this issue Aug 5, 2024 · 1 comment
Labels
type: bug

Comments

@BSarmady
Copy link

BSarmady commented Aug 5, 2024 •
edited
Loading

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
Copy link
Author

BSarmady commented Aug 5, 2024

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.

@BSarmady BSarmady changed the title Legend Title does ot fit Legend title does not fit Aug 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@BSarmady