Uncaught TypeError: Cannot read property 'skip' of undefined

I am using chartjs for my React Application. The data is getting updated every second. If i give redraw as true then the Line chart redraws every second and it is not very pleasing, but if i give redraw as false, then the chart doesn’t update for some time and then it give the above TypeError. Below is the code that i am using.

getOptions(showLabelX, showLabelY) {
    return {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: true,
        position: "right"
      },
      scales: {
        yAxes: [
          {
            scaleLabel: {
              display: true
            },
            ticks: {
              display: true,
              minRotation: 0
            }
          }
        ],
        xAxes: [
          {
            gridLines: {
              display: false
            },
            scaleLabel: {
              display: true
            },
            ticks: {
              autoSkip: true,
              maxTicksLimit: 4,
              display: true,
              minRotation: 0
            }
          }
        ]
      }
    };
  };

render(){
   const options = this.getOptions(this.state.showLabelX, this.state.showLabelY);
   const data = this.state.data;
   return(
        <Line redraw = {false} data={data} options={options} />
    )
} 

[reinisg]

Hello, I have pretty similar issue - ‘Uncaught (in promise) TypeError: Cannot read property ‘height’ of undefined’ My case is different, I’m using WordPress and creating custom Gutenberg block plugin in edit function all works fine, chart is drawing corretly, but when I want to output in save function (which will show in post frontend), i get that error. The error is targeting to this line> ChartComponent.prototype.render = function render() { var _props3 = this.props, height = _props3.height, width = _props3.width, id = _props3.id;

I try to setup height for chart, but it doesn’t resolve the issue. My entire code in plugin:

import "./style.scss"; import "./editor.scss"; import {Line} from "react-chartjs-2"; const { registerBlockType } = wp.blocks; const chartData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', fill: false, lineTension: 0.1, backgroundColor: 'rgba(75,192,192,0.4)', borderColor: 'rgba(75,192,192,1)', borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: 'rgba(75,192,192,1)', pointBackgroundColor: '#fff', pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: 'rgba(75,192,192,1)', pointHoverBorderColor: 'rgba(220,220,220,1)', pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [65, 59, 80, 81, 56, 55, 40] } ] }; export default registerBlockType("gcb/customgraph", { title: "Custom chart", description: "Create custom chart", category: "common", icon: "chart-bar", supports: { html: true }, edit: props => { return ( <div> <Line data={chartData} width="600" height="250"/> </div> ); } save: props => { return ( <div> <Line data={data} width="600" height="250" /> </div> ); } });

Have any ideas? Regards, Reinis

[dangreen]

@reinisg Hi. If your issue is still relevant, please create a new issue with an example of issue reproduction (repo, codesandbox, …).