chartjs / chartjs/Chart.js

"pie": Runtime errors when setting legend position to "left" or "right"

Open
#11,594 5 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

It is unacceptable that changing the legend position from "top" to "left" or "right" in Chart.js using Angular v4.x.x results in runtime errors when chart options are null. This issue needs to be addressed and resolved immediately.

### Current behavior

When changing the legend position from "top" to "left" or "right" in Chart.js starting from `v4.x.x` using Angular. it causes runtime errors whereas chart options are `null` for no reason. Which should be working as usual. ,

### Reproducible sample

[Codesandbox sample](https://codesandbox.io/p/sandbox/ng2charts-chart-js-issue-template-forked-3jdjlg?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A14%2C8&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpcrimml00072v6mvxq49n00%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpcrimml00032v6miykj3wny%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpcrimml00042v6m5uvkehni%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpcrimrk000j2v6m9pqasmpd%2522%257D%252C%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpcrimml00062v6mx5l3ixo0%2522%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpcrimrk000j2v6m9pqasmpd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522SANDBOX_ONBOARDING%2522%252C%2522id%2522%253A%2522sandbox-onboarding%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522id%2522%253A%2522clpcrjgf7006h2v6m3ohos1f8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fapp%252Fapp.component.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clpcrimrk000j2v6m9pqasmpd%2522%252C%2522activeTabId%2522%253A%2522clpcrjgf7006h2v6m3ohos1f8%2522%257D%252C%2522clpcrimml00032v6miykj3wny%2522%253A%257B%2522id%2522%253A%2522clpcrimml00032v6miykj3wny%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clpcrimml00062v6mx5l3ixo0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpcrimml00052v6mgtgryr9e%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%2522%257D%255D%252C%2522id%2522%253A%2522clpcrimml00062v6mx5l3ixo0%2522%252C%2522activeTabId%2522%253A%2522clpcrimml00052v6mgtgryr9e%2522%257D%252C%2522clpcrimml00042v6m5uvkehni%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clpcrimml00042v6m5uvkehni%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

### Optional extra steps/info to reproduce

Check out the console
![image](https://github.com/chartjs/Chart.js/assets/6782195/f7fa1637-0042-4099-8e0b-c7259eebcb18)

### Possible solution

_No response_

### Context

_No response_

### chart.js version

v4.x.x

### Browser name and version

Google Chrome Version 117.0.5938.149 (Official Build) (64-bit)

### Link to your project

[Codesandbox sample](https://codesandbox.io/p/sandbox/ng2charts-chart-js-issue-template-forked-3jdjlg?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A14%2C8&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpcrimml00072v6mvxq49n00%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpcrimml00032v6miykj3wny%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpcrimml00042v6m5uvkehni%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpcrimrk000j2v6m9pqasmpd%2522%257D%252C%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpcrimml00062v6mx5l3ixo0%2522%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpcrimrk000j2v6m9pqasmpd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522SANDBOX_ONBOARDING%2522%252C%2522id%2522%253A%2522sandbox-onboarding%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522id%2522%253A%2522clpcrjgf7006h2v6m3ohos1f8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fapp%252Fapp.component.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clpcrimrk000j2v6m9pqasmpd%2522%252C%2522activeTabId%2522%253A%2522clpcrjgf7006h2v6m3ohos1f8%2522%257D%252C%2522clpcrimml00032v6miykj3wny%2522%253A%257B%2522id%2522%253A%2522clpcrimml00032v6miykj3wny%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clpcrimml00062v6mx5l3ixo0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpcrimml00052v6mgtgryr9e%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%2522%257D%255D%252C%2522id%2522%253A%2522clpcrimml00062v6mx5l3ixo0%2522%252C%2522activeTabId%2522%253A%2522clpcrimml00052v6mgtgryr9e%2522%257D%252C%2522clpcrimml00042v6m5uvkehni%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clpcrimml00042v6m5uvkehni%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.