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
5 Answers, 1 is accepted
Hello, Danny,
Thank you for the code.
We had a similar report before and it was connected to the PropTypes version included in the application.
Please check if updating the version of the prop-types package will resolve the warning
https://www.npmjs.com/package/prop-types
If the issue still occurs, please share the package.json, as this will provide us with a better understanding of the setup.
Also, please have in mind that this is a type warning in development, it is not an issue and it will not be shown in production.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Hey Stefan,
Appreciate the response! I updated my the prop-types package from 15.6.2 to 15.7.2 and the warning is still there.
{
"name": "lmi-usigallocator-frontend",
"version": "0.1.0",
"description": "Basic React Application with ES2015, Express.js, and Webpack 4",
"license": "Apache-2.0",
"engines": {
"node": ">=8.x"
},
"scripts": {
"dev": "cross-env WEBPACK_MODE=development NODE_ENV=undeployed node src/server",
"start-dev": "cross-env WEBPACK_MODE=development node src/server",
"start": "npm run build && cross-env WEBPACK_MODE=production node build/server",
"start-local": "npm run build-local && node build/server",
"prebuild": "rimraf build",
"build": "npm run build-client && npm run build-server",
"build-local": "npm run prebuild && npm run build-client-local && npm run build-server",
"build-client": "cross-env WEBPACK_MODE=production webpack -p --config=config/webpack.config.deployed.js",
"build-client-local": "cross-env WEBPACK_MODE=development webpack -p --config=config/webpack.config.local.js",
"build-server": "copyfiles -a -u 1 \"src/server/**/*\" build",
"lint": "eslint --ignore-path .gitignore --ignore-pattern node_modules . --ext .js --ext .jsx",
"precommit": "npm run lint && npm test && npm run test-feature",
"selenium": "node ./scripts/postinstall",
"check-audit": "check-audit --proxy=http://fusion-proxy.lmig.com:80 --https-proxy=http://fusion-proxy.lmig.com:80 --registry=https://registry.npmjs.org/",
"resolve-audit": "resolve-audit --registry=https://registry.npmjs.org/",
"test": "npm run test-unit",
"test-feature": "npm run selenium && babel-node ./src/test/features/runFeatureTests",
"test-feature-sauce": "babel-node ./src/test/features/runFeatureTests sauce",
"test-feature-skip-build": "npm run selenium && babel-node ./src/test/features/runFeatureTests skipBuild",
"test-unit": "cross-env nyc --report=html --report=text mocha --require @babel/register --require ignore-styles ./testSetup.js \"src/**/*-test.js\""
},
"devDependencies": {
"@babel/core": "7.2.2",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-watch": "^7.0.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"chai-enzyme": "^1.0.0-beta.1",
"cheerio": "^1.0.0-rc.1",
"copyfiles": "^2.1.0",
"cross-env": "^5.2.0",
"css-loader": "^2.1.0",
"cucumber": "^4.1.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"eslint": "^5.12.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.4.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.3",
"eslint-plugin-webdriverio": "^1.0.1",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"html-loader": "^0.5.5",
"html-webpack-harddisk-plugin": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"ignore-styles": "^5.0.1",
"mocha": "^5.2.0",
"moxios": "^0.4.0",
"node-sass": "^4.11.0",
"npm-audit-resolver": "2.2.0",
"nyc": "^14.1.1",
"portfinder": "^1.0.20",
"redux-mock-store": "^1.5.4",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"selenium-standalone": "^6.15.4",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.2.3",
"wdio-cucumber-framework": "^2.2.8",
"wdio-junit-reporter": "^0.4.4",
"wdio-sauce-service": "^0.4.14",
"wdio-spec-reporter": "^0.1.5",
"webdriverio": "^4.14.2",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-middleware": "^3.5.0",
"webpack-dev-server": "^3.10.3",
"webpack-hot-middleware": "^2.24.3",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"@babel/polyfill": "^7.2.5",
"@lmig/azure-node-auth": "1.5.0",
"@material-ui/core": "^4.9.3",
"@material-ui/icons": "^4.9.1",
"@progress/kendo-data-query": "^1.5.3",
"@progress/kendo-drawing": "^1.6.0",
"@progress/kendo-react-animation": "^3.12.0",
"@progress/kendo-react-buttons": "^3.12.0",
"@progress/kendo-react-charts": "^3.13.0",
"@progress/kendo-react-data-tools": "^3.12.0",
"@progress/kendo-react-dateinputs": "^3.12.0",
"@progress/kendo-react-dialogs": "^3.12.0",
"@progress/kendo-react-dropdowns": "^3.12.0",
"@progress/kendo-react-excel-export": "^3.12.0",
"@progress/kendo-react-form": "^3.11.0",
"@progress/kendo-react-grid": "^3.12.0",
"@progress/kendo-react-inputs": "^3.11.0",
"@progress/kendo-react-intl": "^3.11.0",
"@progress/kendo-react-layout": "^3.12.0",
"@progress/kendo-react-ripple": "^3.12.0",
"@progress/kendo-ui": "^2020.1.219",
"axios": "^0.19.2",
"body-parser": "^1.18.3",
"clsx": "^1.1.0",
"compression": "^1.7.3",
"config": "^3.3.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"file-system": "^2.2.2",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-hot-loader": "^4.8.0",
"react-redux": "^7.2.0",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"request": "^2.88.2",
"request-promise": "^4.2.5",
"tough-cookie": "^4.0.0",
"winston": "^3.2.1",
"yarn": "^1.22.4"
}
}
here's my package.json. Thanks for all the help Stefan.
Hello, Danny,
Thank you for the additional details.
I made a new project using the provided code, but the Chart was rendered without any warnings.
The only thing that is different in my example is the data, as I do not have access to the real one.
I'm attaching the project I used for the test, is it possible to see if you will be able to reproduce the error by modifying it, as this will help us investigate it locally. I assume that there is a very small detail which we are missing.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Iron
I've been getting the same warning and I've had no luck trying to figure it out so far.
Has anyone solved it yet?
Hello, Nilton,
Please share the current Chart implementation from the real application and I will be happy to take a look to see if there is any reason for the error.
In general, the error can occur if ChartSeriesItem is not a direct child of ChartSeries.
Rank 1
Iron
Hello,
I'm facing the same problem. I have multiple series for the same chart.
<ChartSeries>
{getChartValues().map((item, index) => (
<ChartSeriesItem
key={index}
type="column"
stack={{ group: 'a' }}
data={item.values}
name={getChartValues()[index].type}
gap={1}
visual={seriesVisual}
>
<ChartSeriesLabels content={labelContent} visual={labelVisual} margin={0} />
<ChartSeriesItemTooltip render={renderTooltip} />
</ChartSeriesItem>
))}
{getChartProjectionValues().map((item, index) => (
<ChartSeriesItem
key={index}
visible={props.showProjection}
type="column"
stack={{ group: 'a' }}
data={item.values}
name={getChartProjectionValues()[index].type + ' Projection'}
gap={1}
color={`url(#hatch${index})`}
border={{ color: '#ffffff' }}
visual={seriesVisual}
>
<ChartSeriesLabels content={labelContent} visual={labelVisual} margin={0} />
<ChartSeriesItemTooltip render={renderTooltip} background={getColorFromCss(index)} />
</ChartSeriesItem>
))}
{getChartTotalValues().map((item, index) => (
<ChartSeriesItem
key={index}
visible={props.showTotalValues}
type="column"
stack={{ group: 'b' }}
data={item.values}
name={getChartTotalValues()[index].type + ' Total'}
gap={1}
visual={seriesVisual}
>
<ChartSeriesLabels content={labelContent} visual={labelVisual} margin={0} />
<ChartSeriesItemTooltip render={renderTooltip} />
</ChartSeriesItem>
))}
{getChartProjectionTotalValues().map((item, index) => (
<ChartSeriesItem
key={index}
visible={props.showProjectionTotal}
type="column"
stack={{ group: 'b' }}
data={item.values}
name={getChartProjectionTotalValues()[index].type + ' Total Projection'}
gap={1}
color={`url(#hatch${index + 2})`}
border={{ color: '#ffffff' }}
visual={seriesVisual}
>
<ChartSeriesLabels content={labelContent} visual={labelVisual} margin={0} />
<ChartSeriesItemTooltip render={renderTooltip} background={getColorFromCss(index + 2)} />
</ChartSeriesItem>
))}
{/* Workaround for show stack value only with one series on a group */}
<ChartSeriesItem
key="zerosA"
type="column"
stack={{ group: 'a' }}
data={new Array<number>(12).fill(0)}
name={'zeros A'}
gap={1}
visibleInLegend={false}
>
<ChartSeriesLabels content={labelContent} visual={labelVisual} margin={0} />
<ChartSeriesItemTooltip render={renderTooltip} />
</ChartSeriesItem>
<ChartSeriesItem
key="zerosB"
visible={props.showTotalValues}
type="column"
stack={{ group: 'b' }}
data={new Array<number>(12).fill(0)}
name={'zeros B'}
gap={1}
visibleInLegend={false}
>
<ChartSeriesLabels content={labelContent} visual={labelVisual} margin={0} />
<ChartSeriesItemTooltip render={renderTooltip} />
</ChartSeriesItem>
</ChartSeries>
The result is ok, but I would like to remove the warning.
Hi, Antonio,
I would be really glad to hep you in resolving the issue, but as you can see in the previous posts in this thread - we were never able to replicate the problem at our can. It will be really helpful if you prepare and send me a runnable sample where I can reproduce the undesired warnings and debug further what is causing them.