React-chartjs-2: Mix chart, labels.slice is not a function error

[muratcatal]

Versions

react-chartjs-2 version: 2.7.0
react: 16.2.0

Error Description

hi, i m trying to apply the mix example which has two y-axes, however it gives the below error.
labels.slice is not a function

Code

const data = {
    labels: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July'
    ],
    datasets: [
        {
            label: 'Sales',
            type: 'line',
            data: [
                51,
                65,
                40,
                49,
                60,
                37,
                40
            ],
            fill: false,
            borderColor: '#EC932F',
            backgroundColor: '#EC932F',
            pointBorderColor: '#EC932F',
            pointBackgroundColor: '#EC932F',
            pointHoverBackgroundColor: '#EC932F',
            pointHoverBorderColor: '#EC932F',
            yAxisID: 'y-axis-2'
        }, {
            type: 'bar',
            label: 'Visitor',
            data: [
                200,
                185,
                590,
                621,
                250,
                400,
                95
            ],
            fill: false,
            backgroundColor: '#71B37C',
            borderColor: '#71B37C',
            hoverBackgroundColor: '#71B37C',
            hoverBorderColor: '#71B37C',
            yAxisID: 'y-axis-1'
        }
    ]
};

const options = {
    responsive: true,
    tooltips: {
        mode: 'label'
    },
    elements: {
        line: {
            fill: false
        }
    },
    scales: {
        xAxes: [
            {
                display: true,
                gridLines: {
                    display: false
                },
                labels: {
                    show: true
                }
            }
        ],
        yAxes: [
            {
                type: 'linear',
                display: true,
                position: 'left',
                id: 'y-axis-1',
                gridLines: {
                    display: false
                },
                labels: {
                    show: true
                }
            }, {
                type: 'linear',
                display: true,
                position: 'right',
                id: 'y-axis-2',
                gridLines: {
                    display: false
                },
                labels: {
                    show: true
                }
            }
        ]
    }
};
<Line data={data} options={options}/>

Is it a bug or do i implement something wrong?

[berthelol]

+1

[weisssean]

+1

[weisssean]

After fiddling with this for a little while, I found a way to fix the example. It is very easy and I don't understand why it is not posted anywhere, but now it is.
Instead of defining your labels in data, you just have to define them in scales.xAxes like so:

`
import React from 'react';
import {Bar} from 'react-chartjs-2';

const data = {
// labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Sales',
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
},{
type: 'bar',
label: 'Visitor',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
}]
};

const options = {
responsive: true,
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {

xAxes: [
  {
    display: true,
    gridLines: {
      display: false
    },

    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  }
],
yAxes: [
  {
    type: 'linear',
    display: true,
    position: 'left',
    id: 'y-axis-1',
    gridLines: {
      display: false
    },
    labels: {
      show: true
    }
  },
  {
    type: 'linear',
    display: true,
    position: 'right',
    id: 'y-axis-2',
    gridLines: {
      display: false
    },
    labels: {
      show: true
    }
  }
]

}
};

const plugins = [{
afterDraw: (chartInstance, easing) => {
const ctx = chartInstance.chart.ctx;
ctx.fillText("This text drawn by a plugin", 100, 100);
}
}];

class Mix extends React.Component {
render() {
return (

Mixed data Example

data={data}
options={options}
plugins={plugins}
/>

);
}
}

export default Mix;
`

[sabinbogati1]

Thanks!!! 👍

[uthayacloud]

Awesome Brother thanks lot 👍

[sdp781]

👍

[ddcouples]

that is because ‘options.scales.xAxes.labels’ rewrite ‘data.labels’,so you also delete the labels in options and keep the labeled in data to makesure that this chart can changed when xAxes’s data change! I don’t know why it cover,maybe it is a bug...

[LordDraagonLive]

@ddcouples your answer is correct. Removing Labels from options works.
Thank you

[gowtham78]

Hai Guys I am trying to apply above code to change the labels also i got same error TypeError: labels.slice is not a function

import React from 'react';
import {Bar} from 'react-chartjs-2';

class MixExample extends React.Component {

render() {
const data = {

datasets: [{
label: 'Sales',
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
},{
type: 'bar',
label: 'Visitor',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
}]
};

const options = {
responsive: true,

tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
gridLines: {
display: false
},
labels: {
show: true
}
}
],
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
gridLines: {
display: false
},
labels: {
show: true
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
display: false
},
labels: {
show: true
}
}
]
}
};

const plugins = [{
afterDraw: (chartInstance, easing) => {
const ctx = chartInstance.chart.ctx;
ctx.fillText("This text drawn by a plugin", 100, 100);
}
}];

return (
  <div>
    <h2>Mixed data Example</h2>
    <Bar
      data={data}
      options={options}
      plugins={plugins}
    />
  </div>
);

}

}
export default MixExample;

This is my code

[carior]

thank you very much!

[sheixt]

Updating the example (https://github.com/jerairrest/react-chartjs-2/blob/master/example/src/components/mix.js) with @weisssean answer would help others avoid this issue.

[RichStone]

Updating the example (https://github.com/jerairrest/react-chartjs-2/blob/master/example/src/components/mix.js) with @weisssean answer would help others avoid this issue.

still getting the same error with the updated code..
Unhandled Rejection (TypeError): labels.slice is not a function

[fabienpinel]

I had this error when trying the example code but in my code I keep having TypeError: Cannot read property 'options' of undefined at ChartElement.initialize (Chart.js:4798)

Really annoying that this whole Mixed Graph is not well documented. Anyone having the same issue ?

[iiiok]

the Sample code set the labels here,

const data = {
labels: [

'January', 'February', 'March', 'April', 'May', 'June', 'July' ],

Doesn't work!!

I set the labels outside of the data Object:

const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July' ];

and replace the [labels:labels: {show: true} ] in the [options]->[scales]->[xAxes].. with [labels: labels]

It Works

[robinlavallee]

Not sure why this issue is closed, I get this exact error when looking at the example code from: https://github.com/jerairrest/react-chartjs-2/blob/master/example/src/components/mix.js#L5
This is the first hit when searching for labels.slice is not a function error in Google.

@weisssean provides a workaround that works for my case.

[reorx]

I've never loved a bad formatted answer like this before 😂

[rajnada]

After fiddling with this for a little while, I found a way to fix the example. It is very easy and I don't understand why it is not posted anywhere, but now it is.
Instead of defining your labels in data, you just have to define them in scales.xAxes like so:

`
import React from 'react';
import {Bar} from 'react-chartjs-2';

const data = {
// labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Sales',
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
},{
type: 'bar',
label: 'Visitor',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
}]
};

const options = {
responsive: true,
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {

xAxes: [
  {
    display: true,
    gridLines: {
      display: false
    },

    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  }
],
yAxes: [
  {
    type: 'linear',
    display: true,
    position: 'left',
    id: 'y-axis-1',
    gridLines: {
      display: false
    },
    labels: {
      show: true
    }
  },
  {
    type: 'linear',
    display: true,
    position: 'right',
    id: 'y-axis-2',
    gridLines: {
      display: false
    },
    labels: {
      show: true
    }
  }
]

}
};

const plugins = [{
afterDraw: (chartInstance, easing) => {
const ctx = chartInstance.chart.ctx;
ctx.fillText("This text drawn by a plugin", 100, 100);
}
}];

class Mix extends React.Component {
render() {
return (

Mixed data Example

);
}
}
export default Mix;
`

Thankyou brother

[moparlakci]

just remove the labels key in scales xAxes and it works.. don't put labels: { show: true } or something..