Manual Configuration doesn't work for ChartJS charts

[Mara42]

Description

None of the ChartJS charts won't modify if you add code in the Manual Configuration tab, however, the exact same code added to the Manual Configuration tab for Google Charts does work.

Step-by-step reproduction instructions

1. Make sure you have a WP instance with Visualizer installed and activated
2. Create a ChartJS chart and try to add code in the Manual Configuration

Screenshots, screen recording, code snippet or Help Scout ticket

The first chart is from Google Charts, which shows the modifications provided by the code in the Manual Configuration, and the second is from ChartJS.

Same here

You can try with this code: {
"legend": {
"textStyle": {
"fontSize": 14,
"fontName": "Spectral",
"bold": true,
"color": "red"
}
}
}

HelpScout ticket: https://secure.helpscout.net/conversation/2711096424/434294?viewId=212385

Test instance: https://filthyhearing.s2-tastewp.com/2024/09/20/5/
Username: test
Password: test

Environment info

No response

Is the issue you are reporting a regression

No

[vytisbulkevicius]

Hi @Mara42,

It works but for ChartJS library the format is a bit different. For example, in your case you're changing the legend so format would be like this for the Pie chart:

{
  "plugins": {
    "legend": {
      "labels": {
        "font": {
          "size": "14",
          "family": "Spectral",
          "weight": "bold"
        },
        "color": "red"
      }
    }
  }
}

You can play around with other settings as well but I tested and it works.

[Mara42]

Hi @vytisbulkevicius,

I just tested on a couple of instances and the changes appear only in the preview of the chart, but when viewing the page/post in which the chart is added, the changes of the legend are not visible.
https://imgur.com/a/NVGdrmT
https://imgur.com/a/hnItIsD

[AndreeaCristinaRadacina]

Hey @vytisbulkevicius,

I tested Mara's scenario, and I can confirm that the ChartJS modifications are not visible on frontend: