chartjs / chartjs/Chart.js

Label font style not rendering due to having some 'null' points in the array.

Open
#11,590 0 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

What should happen is as follows:
• If I have a "complete" array, for example `[0, 1, 2, 3]` with the labels being `["first", "second", "third", "fourth"]`. When I have an active/selected item on my chart, e.g. position 1 of the array, the font should become bold, that is the object:
```javascript
ticks: {
color: [null, 'red', 'green', null],
font: {
weight: [null, 700, 400, null],
},
},
```
This approach currently works on my chart.

When I introduce null points in array, it should just ignore it, not bypass all the stylization

### Current behavior

The problem arises when I change the edges points on this chart to null:
• Data: `[null, 1, 2, null,]`
• Labels: `[null, "second", "third", null]`
• Weight array: `[null, 700, 400, null]`
This scenario causes the chart not to render the bold of the font as it did before, just for introducing a `null` to the array.
Is there a way around this? Is it a problem with the library or my implementation?

### Reproducible sample

https://codepen.io/rfschaer/pen/KKJRajZ

### Optional extra steps/info to reproduce

Add null point on beginning/end of the array

### Possible solution

_No response_

### Context

I am currently adding null to beginning/end of the array so my data displayed can be centered and well fit in a more complex composed-chart. In the codepen provided I have this exact example.

### chart.js version

4.4.0

### Browser name and version

Chrome

### Link to your project

_No response_

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.