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.

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

Legend not displaying all labels #10893

Open
kosn1 opened this issue Nov 19, 2022 · 4 comments
Open

Legend not displaying all labels #10893

kosn1 opened this issue Nov 19, 2022 · 4 comments

Comments

@kosn1
Copy link

kosn1 commented Nov 19, 2022

Expected behavior

I am creating a stacked, horizontal bar chart with 6 datasets. The label of each dataset should appear in the legend

Current behavior

Only the first 4 labels are being displayed in the legend. Seems like canvas height is not long enough to fit the content
Untitled

Reproducible sample

https://codepen.io/kosn1/pen/abKENbp

Optional extra steps/info to reproduce

Here is my html code

<div>
	<canvas id="line-chart"></canvas>
</div>

and the js

const projectsLineChart = new Chart(
		document.getElementById('line-chart'), {
			type: 'bar',
			data: {
				labels: [''],
				datasets: [

					{
						label: Dataset 1',
						barThickness: 12,
						data: [312],
					
					}, {
						label: 'Dataset 2',
						barThickness: 12,
						data: [238],
					},
					{
						label: 'Dataset 3',
						barThickness: 12,
						data: [538],
						
					},
					{
						label: 'Dataset 4',
						barThickness: 12,
						data: [58],
						
					},
					{
						label: 'Dataset 5',
						barThickness: 12,
						data: [158],
						
					},
				]
			},
			options: {
				plugins: {
					legend: {
						position: 'bottom',
						title: {
							display: true,
							text: 'Datasets',
							padding: {
								top: 15
							},
							font: {
								size: 18
							}
						}

					}
				},
				indexAxis: 'y',
				responsive: true,
				scales: {
					x: {

						stacked: true,
					},
					y: {

						stacked: true,

					}
				},
			},

		}
	);

Possible solution

Is there a way so the canvas height always adjust to its contents dynamically?

Context

No response

chart.js version

4.0.1

Browser name and version

Google Chrome 107.0.5304.107

Link to your project

No response

@LeeLenaleee
Copy link
Collaborator

You could use a custom plugin that checks how many datasets there are, how heigh the canvas is, calculate if it all fits, if not increase the height of the canvas and call a rerender

@kosn1
Copy link
Author

kosn1 commented Nov 22, 2022

What is the name of this plugin you are reffering?

@LeeLenaleee
Copy link
Collaborator

It does not exist, you will need to create it yourself

@jezmck
Copy link

jezmck commented Jan 26, 2023

Shouldn't it default behaviour that all datasets be visible in the legend?
I'm having a similar problem, but the legend is wrapping underneath the chart.

image
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants