React-chartjs-2: Mixing Charts

[GrudonR]

Hi,
I tried to implement the mix function in my project but it doesn't work.
When I try to use the example this get's out of my browser console.

Uncaught TypeError: labels.slice is not a function
at ChartElement.buildTicks (scale.category.js:48)
at ChartElement.update (core.scale.js:215)
at getMinimumBoxSize (core.layoutService.js:194)
at Object.each (helpers.core.js:108)
at Object.update (core.layoutService.js:208)
at Chart.updateLayout (core.controller.js:408)
at Chart.update (core.controller.js:365)
at Chart.construct (core.controller.js:123)
at new Chart (core.js:42)
at ChartComponent.renderChart (index.js:228)

in cale.category.js:48

The above error occurred in the component:
in ChartComponent (created by Bar)
in Bar (created by ChartLayout)
in div (created by ChartLayout)
in ChartLayout (created by Layout)
in div (created by Layout)
in Layout

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

in react-dom.development.js:9740

Uncaught TypeError: Cannot read property 'destroy' of undefined
at ChartComponent.componentWillUnmount (index.js:107)
at callComponentWillUnmountWithTimer (react-dom.development.js:8740)
at HTMLUnknownElement.callCallback (react-dom.development.js:540)
at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
at invokeGuardedCallback (react-dom.development.js:436)
at safelyCallComponentWillUnmount (react-dom.development.js:8747)
at commitUnmount (react-dom.development.js:8873)
at commitNestedUnmounts (react-dom.development.js:8909)
at unmountHostComponents (react-dom.development.js:9192)
at commitDeletion (react-dom.development.js:9242)

componentWillUnmount @ index.js:107
callComponentWillUnmountWithTimer @ react-dom.development.js:8740
callCallback @ react-dom.development.js:540
invokeGuardedCallbackDev @ react-dom.development.js:579
invokeGuardedCallback @ react-dom.development.js:436
safelyCallComponentWillUnmount @ react-dom.development.js:8747
commitUnmount @ react-dom.development.js:8873
commitNestedUnmounts @ react-dom.development.js:8909
unmountHostComponents @ react-dom.development.js:9192
commitDeletion @ react-dom.development.js:9242
commitAllHostEffects @ react-dom.development.js:9918
callCallback @ react-dom.development.js:540
invokeGuardedCallbackDev @ react-dom.development.js:579
invokeGuardedCallback @ react-dom.development.js:436
commitRoot @ react-dom.development.js:10007
performWorkOnRoot @ react-dom.development.js:10966
performWork @ react-dom.development.js:10916
requestWork @ react-dom.development.js:10832
scheduleWorkImpl @ react-dom.development.js:10715
scheduleWork @ react-dom.development.js:10677
scheduleTopLevelUpdate @ react-dom.development.js:11140
updateContainer @ react-dom.development.js:11178
(anonymous) @ react-dom.development.js:15190
unbatchedUpdates @ react-dom.development.js:11049
renderSubtreeIntoContainer @ react-dom.development.js:15189
render @ react-dom.development.js:15254
(anonymous) @ client.js:7
__webpack_require__ @ bootstrap eead2b82cc71b971f506:678
fn @ bootstrap eead2b82cc71b971f506:88
(anonymous) @ qryptos.js:261
__webpack_require__ @ bootstrap eead2b82cc71b971f506:678
(anonymous) @ bootstrap eead2b82cc71b971f506:724
(anonymous) @ bootstrap eead2b82cc71b971f506:724
scale.category.js:48 Uncaught TypeError: labels.slice is not a function

at ChartElement.buildTicks (scale.category.js:48)
at ChartElement.update (core.scale.js:215)
at getMinimumBoxSize (core.layoutService.js:194)
at Object.each (helpers.core.js:108)
at Object.update (core.layoutService.js:208)
at Chart.updateLayout (core.controller.js:408)
at Chart.update (core.controller.js:365)
at Chart.construct (core.controller.js:123)
at new Chart (core.js:42)
at ChartComponent.renderChart (index.js:228)

and this is my package.json

{

"name": "chartjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"ansicolor": "^1.1.71",
"as-table": "^1.0.31",
"babel-core": "^6.17.0",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.0.16",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"ccxt": "^1.10.54",
"chart.js": "^2.7.1",
"lodash": "^4.17.4",
"moment": "^2.19.2",
"mongodb": "^2.2.33",
"node-sass": "^4.6.0",
"ololog": "^1.1.78",
"react": "^16.1.0",
"react-animate-on-change": "^1.0.1",
"react-chartjs-2": "^2.6.4",
"react-chartjs-wrapper": "^2.6.0",
"react-dom": "^16.1.0",
"rethinkdb": "^2.3.3",
"socket.io": "^2.0.4",
"uikit": "^3.0.0-beta.34",
"uikit-react": "^2.3.7",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"devDependencies": {
"css-loader": "^0.28.7",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0"
}
}

[GrudonR]

I fixed it myself,
if anyone cares: I downgraded to react 15.0.0 and chartjs 2.3

But anyways thanks guys!

[ColinVDH]

Also found that the Mix Example does not work with chart.js 2.7 (React 15). Getting the same errors.

[GrudonR]

@ColinVDH you need to use chartjs 2.3

[weisssean]

Is there a fix to this issue yet?

[GrudonR]

@weisssean I'm not aware of any but just use Chartjs 2.3 and React 15.0.0 and it should work.

[weisssean]

Did not want to downgrade.
I managed to find the right solution through some detective work.
My answer is here:
react-chartjs-2/issues/247

[hienhuynhtm]

move labels from data as below to chartOptions:
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], _// THIS LINE_
datasets: [{
},{
}]
};

chartOptions = {
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], // _TO THIS LINE_
}
],
yAxes: [
...
]
}
};

[Pringels]

Duplicate of #441