This is a migrated thread and some comments may be shown as answers.

Warning: Failed prop type: ChartSeries children should be Array of type ChartSeriesItem

4 Answers 47 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Danny asked on 01 May 2020, 07:31 PM

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

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 04 May 2020, 01:49 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Danny
Top achievements
Rank 1
answered on 04 May 2020, 02:31 PM

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.

0
Stefan
Telerik team
answered on 05 May 2020, 01:56 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Nilton
Top achievements
Rank 1
Iron
answered on 21 Sep 2021, 03:59 PM
Hello, everyone.

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?

Stefan
Telerik team
commented on 22 Sep 2021, 06:05 AM

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.

Tags
General Discussions
Asked by
Danny
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Danny
Top achievements
Rank 1
Nilton
Top achievements
Rank 1
Iron
Share this question
or