React-chartjs-2: Try to run Mix Chart Example, got error.

[jzyxyz]

With the following version
"react": "^16.9.0",
"react-chartjs-2": "^2.8.0",
"react-dom": "^16.9.0"

Uncaught TypeError: labels.slice is not a function
at ChartElement.buildTicks (Chart.js:10753)
at ChartElement.update (Chart.js:9954)
at getMinimumBoxSize (Chart.js:6093)
at Object.each (Chart.js:1772)
at Object.update (Chart.js:6107)
at Chart.updateLayout (Chart.js:8402)
at Chart.update (Chart.js:8361)
at Chart.construct (Chart.js:8105)
at new Chart (Chart.js:8045)
at ChartComponent.renderChart (index.js:276)
at ChartComponent.componentDidMount (index.js:94)
at commitLifeCycles (react-dom.development.js:21142)
at commitLayoutEffects (react-dom.development.js:24138)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:466)
at commitRootImpl (react-dom.development.js:23903)
at unstable_runWithPriority (scheduler.development.js:674)
at runWithPriority$2 (react-dom.development.js:11834)
at commitRoot (react-dom.development.js:23723)
at runRootCallback (react-dom.development.js:22809)
at react-dom.development.js:11886
at unstable_runWithPriority (scheduler.development.js:674)
at runWithPriority$2 (react-dom.development.js:11834)
at flushSyncCallbackQueueImpl (react-dom.development.js:11881)
at flushSyncCallbackQueue (react-dom.development.js:11869)
at discreteUpdates$1 (react-dom.development.js:22941)
at discreteUpdates (react-dom.development.js:2440)
at dispatchDiscreteEvent (react-dom.development.js:6254)
index.js:292 Uncaught TypeError: Cannot read property 'config' of undefined
at ChartComponent.destroyChart (index.js:292)
at ChartComponent.componentWillUnmount (index.js:147)
at callComponentWillUnmountWithTimer (react-dom.development.js:20940)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:466)
at safelyCallComponentWillUnmount (react-dom.development.js:20947)
at commitUnmount (react-dom.development.js:21419)
at commitNestedUnmounts (react-dom.development.js:21486)
at unmountHostComponents (react-dom.development.js:21815)
at commitDeletion (react-dom.development.js:21889)
at commitMutationEffects (react-dom.development.js:24117)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:466)
at commitRootImpl (react-dom.development.js:23869)
at unstable_runWithPriority (scheduler.development.js:674)
at runWithPriority$2 (react-dom.development.js:11834)
at commitRoot (react-dom.development.js:23723)
at runRootCallback (react-dom.development.js:22809)
at react-dom.development.js:11886
at unstable_runWithPriority (scheduler.development.js:674)
at runWithPriority$2 (react-dom.development.js:11834)
at flushSyncCallbackQueueImpl (react-dom.development.js:11881)
at flushSyncCallbackQueue (react-dom.development.js:11869)
at discreteUpdates$1 (react-dom.development.js:22941)
at discreteUpdates (react-dom.development.js:2440)
at dispatchDiscreteEvent (react-dom.development.js:6254)

[jzyxyz]

I cloned the repo, and npm build npm start it worked fine.
But it's not working in my project.

[qkreltms]

@jzyxyz Please show your code that related with this issue.

[Ravalika24]

Even I have the same error. Tried with a line and a bar, and also tried with two bars. Got the same error just for the mock data-sets itself.
Below is my snippet

const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
type: 'bar',
label: 'First Visitor',
data: [20, 195, 690, 521, 550, 200, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
},{
type: 'bar',
label: 'Second Visitor',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#000',
borderColor: '#000',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
}]
};

// same as mock const options = ...
// same as mock const plugins =...

export const Dashboard = ( props ) => {
return (
\ \ data={data}
options={options}
plugins={plugins}
\/\>
\<\/div>
);
};

export default Dashboard;

[davidmwhynot]

Also having this issue. Examples work when you run them in storybook, do not work when I try to add them to my project.

[ziyadmutawy]

is this still an issue?

[Pringels]

@ziyadmutawy yes it is still an issue. The demo Mix component uses a deprecated configuration for labels. It works in the example code because it has a pinned version of chart.js which still supports the legacy config. I am hoping to resolve this soon.

[djordjesavanovic]

Are there any news about this bug? Fix coming soon?

[akinlekan28]

Solution at https://github.com/jerairrest/react-chartjs-2/issues/247