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

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 ( <div>

Mixed data Example

<Bar data={data} options={options} plugins={plugins} /> </div> ); } }

export default Mix; `

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…

+1

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

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.

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.

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

Awesome Brother thanks lot 👍