I've implemented a basic line chart with nothing out of the ordinary but on the first initial load of the chart I get this warning.
Warning: Failed prop type: ChartSeries children should be Array of type ChartSeriesItem.
in ChartSeries (created by LineChart)
import React from 'react';
import {
Chart, ChartTitle, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartLegend,
} from '@progress/kendo-react-charts';
const LineChart = (props) => {
const { allocations, mandates } = props;
const categories = (data) => {
const array = [];
data.forEach((x) => {
array.push(x.mandate);
});
return array;
};
const asdc = (data) => {
const array = [];
data.forEach((x) => {
array.push(x.asdc);
});
return array;
};
return (
<div className="line-chart">
<Chart>
<ChartTitle
text="Active Spread Duration Contribution"
/>
<ChartLegend
position="bottom"
orientation="horizontal"
/>
<ChartSeries>
<ChartSeriesItem
type="line"
name="New ASDC"
data={asdc(allocations)}
markers={{ visible: false }}
tooltip={{ visible: true }}
/>
<ChartSeriesItem
type="line"
name="Old ASDC"
data={asdc(mandates)}
markers={{ visible: false }}
tooltip={{ visible: true }}
/>
</ChartSeries>
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories(allocations)} />
</ChartCategoryAxis>
</Chart>
</div>
);
};
asdc is just to create the array of data that I want. The whole chart shows up fine and works but I would like to fix this error if possible.
Thanks