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

4 posts, 0 answers
  1. Danny
    Danny avatar
    5 posts
    Member since:
    Mar 2020

    Posted 01 May 2020 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 04 May 2020 Link to this post

    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.
  3. Danny
    Danny avatar
    5 posts
    Member since:
    Mar 2020

    Posted 04 May 2020 in reply to Stefan Link to this post

    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.

  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 05 May 2020 Link to this post

    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.
Back to Top