e.dataItem.chartColor could not be cloned

[Mahesh]

Hi Team,

Combining Chart Series with Pattern-specific rendering. The requirement was to combine/group the chart items where one will be solid and the other will be pattern-specific. I created one sample, and it's working as expected.

Working Example - https://stackblitz.com/edit/react-hxpthdxt-yevr77he?file=app%2Fapp.jsx

I created one more sample for the test. If I pass the chart component on the page itself, then it's working fine, but when the chart props are passed to the global object, then it's throwing an error. 

Failed to execute 'structuredClone' on 'Window': (e) => e.dataItem.chartColor could not be cloned.

Reference Example - https://stackblitz.com/edit/react-hxpthdxt-ufdubb7e

• The first chart is working, and the same code is defined on the second chart, but it's still breaking,
• And behind the chart, some additional background came up after an update of the versions.

Note - If you comment/delete the second-chart, then you can see the first-class chart render correctly.

Versions Used - 

    "@progress/kendo-react-charts": "^9.5.0",
    "react": "^16.14.0",

Please look into it as soon as possible.

Thanks,
Mahesh

[Filip]

Hi, Mahesh,

I am providing the same answer I gave in the submitted ticket previously so that the entire community can benefit. The Error in question occurs because functions currently cannot be passed for the pattern, however we have logged an enhancement which will remove `structuredClone` which is currently used:

•  https://github.com/telerik/kendo-charts/issues/548

For the time being I can suggest the following workaround:

• https://stackblitz.com/edit/react-hxpthdxt-zb5ekcdt?file=app%2FBasicGroupedChart.jsx

Regards,
Filip
Progress Telerik