Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

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

Open rodrigoschaer opened this issue 2 years ago • 0 comments

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:

    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

rodrigoschaer avatar Nov 22 '23 18:11 rodrigoschaer