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

[Danny]

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

[Stefan]

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

[Danny]

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.

[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

[Nilton]

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]

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.

[Antonio]

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.

[Vessy]

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.