Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mix chart, labels.slice is not a function error

See original GitHub issue

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?

Issue Analytics

State:
Created 6 years ago
Reactions:22
Comments:18

Top GitHub Comments

94reactions

weissseancommented, Feb 12, 2018

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; `

5reactions

delenzhangcommented, Sep 26, 2018

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…