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

Parsing data object does not allow for Array Label

Open doekenorg opened this issue 9 months ago • 2 comments

Expected behavior

When datasets contain data objects with keys, the configured label key (xAxisKey) should also allow for multiple lines using the array notation.

Current behavior

When parsing data objects, labels on that object that are split into multiple lines using the array notation are not recognized.

I can enable the correct labels by adding a labels array. This will show the label, but the value for it is still not displayed.

Reproducible sample

https://codepen.io/doekenorg/pen/raaNPvM

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.4.9

Browser name and version

No response

Link to your project

No response

doekenorg avatar Apr 17 '25 10:04 doekenorg

Hi @doekenorg! You can use the id property (or the x property as the default for xAxisKey if not configured) as the index to the label in the labels array, like this: https://codepen.io/adrianbrs/pen/wBBGwxq

{
  "datasets": [
    {
      "label": "Multi row label fail",
      "data": [
        {
          "id": 0,
          "value": 1
        },
        {
          "id": 1,
          "value": 10
        },
        {
          "id": 2,
          "value": 30
        }
      ]
    }
  ],
  "labels": [
    "Result 1",
    ["Result 2","Line 2"],
    "Result 3",
  ]
}

I'm not sure if it should accept an array as the category name inside the data object, but I'd love to fix that if that's the case. For now, I think this workaround is sufficient, and your example might be a good feature request if it's not a bug.

adrianbrs avatar Apr 21 '25 15:04 adrianbrs

Hey @adrianbrs, thank you for that workaround! It works a lot better than repeating the labels!

If you think this is a feature and not a bug, please go ahead and close this issue.

doekenorg avatar Apr 22 '25 08:04 doekenorg