Issue when using ChartPane

[Alex]

I need a chart with x-axis as time and multiple y-axis stacked. One temp which is a range from 0 to 10 and humidity which is from 0 to 1. 

When I try to use ChartPane, I keep getting exception in my react code.

Here is the error:

ErrorBoundary.js:16 ErrorBoundary caught an error TypeError: Cannot read properties of undefined (reading 'map')
    at Object.collectionConfigurationItem (reducer.mjs:41:1)
    at u (reducer.mjs:9:1)
    at Object.c [as dispatch] (store.mjs:13:1)
    at s.dispatch (ConfigurationComponent.mjs:29:1)
    at s.componentDidMount (ConfigurationComponent.mjs:22:1)
    at invokeLayoutEffectMountInDEV (react-dom.development.js:25172:1)
    at invokeEffectsInDev (react-dom.development.js:27390:1)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27366:1)
    at commitRootImpl (react-dom.development.js:26922:1)
    at commitRoot (react-dom.development.js:26721:1) Object

 

Here is my component 

import * as React from 'react';

import {

  Chart,

  ChartSeries,

  ChartSeriesItem,

  ChartValueAxis,

  ChartValueAxisItem,

  ChartCategoryAxis,

  ChartCategoryAxisItem,

  ChartPane

} from '@progress/kendo-react-charts';

// Sample data

const categories = ['04/01/2024', '05/01/2024', '06/01/2024', '07/01/2024'];

const temperatureData = [20, 25, 30, 35];

const humidityData = [0.5, 0.6, 0.7, 0.8];

const MultiPaneChart = () => {

  return (

    <Chart>

      <ChartCategoryAxis>

        <ChartCategoryAxisItem categories={categories} />

      </ChartCategoryAxis>

      <ChartPane name="temperaturePane" />

      <ChartPane name="humidityPane" />

      <ChartValueAxis>

        <ChartValueAxisItem

          name="temperature"

          pane="temperaturePane"

          min={0}

          max={40}

          title={{ text: 'Temperature' }}

        />

        <ChartValueAxisItem

          name="humidity"

          pane="humidityPane"

          min={0}

          max={1}

          title={{ text: 'Humidity' }}

        />

      </ChartValueAxis>

      <ChartSeries>

        <ChartSeriesItem

          type="line"

          data={temperatureData}

          name="Temperature"

          axis="temperature"

          pane="temperaturePane"

          color="red"

        />

        <ChartSeriesItem

          type="line"

          data={humidityData}

          name="Humidity"

          axis="humidity"

          pane="humidityPane"

          color="blue"

        />

      </ChartSeries>

    </Chart>

  );

};

exportdefaultMultiPaneChart;

[Vessy]

Hi, Alex,

The faced error is thrown due to a missing <ChartPanes> component wrapping the configured panes:

• https://stackblitz.com/edit/react-rfnhm1-vxpxmr?file=app%2Fapp.tsx 

      <ChartPanes>
        <ChartPane name="temperaturePane" />
        <ChartPane name="humidityPane" />
      </ChartPanes>

You can find more details regarding the ChartPanes functionality and their proper configuration in the following article:

• https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/panes/ 

I hope this helps but let me know if I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik