Is there a max width of canvas Chart.js can draw charts within?

Question

I recently started working with chart.js with react wrapper for a project. And when I was building this one chart which has a width of 20000px the bars stopped appearing on the screen after the 16390px length.

My chart was scrollable and I had a large dataset due to which the canvas have huge lengths. So I was confused if there is some length limit chart.js can draw its canvas upto.

Here is my code to replicate the issue with attached screenshots.

import React, { Component, createRef } from 'react'
import ChartJsComponent from "react-chartjs-2";

class ScrollableChartJsPlugin extends Component {
    chartRef = createRef()
    render(){ //this will simply return the chart
        return  <ChartJsComponent 
                    ref={this.chartRef}
                    {...this.props}
                />
    }

}

export default ScrollableChartJsPlugin;

import React, { Component } from 'react'
import ScrollableChart from "../../components/ScrollableChartJSPlugin";

class Observe extends Component {
    
    getRandomLabel = () => {
        let data = [];
        for(let i = 0; i<1000; i++){
            data.push(`Label ${i}`)
        }

        return data;
    }

    render(){ 

        var data =  {
            labels: this.getRandomLabel(),
            datasets: [
                {
                    backgroundColor: 'rgba(237, 77, 77,1)',
                    borderColor: 'rgba(237, 77, 77,1)',
                    borderWidth: 1,
                    hoverBackgroundColor: 'rgba(237, 77, 77,0.8)',
                    hoverBorderColor: 'rgba(237, 77, 77,1)',
                    data: this.getRandomLabel().map(el => 1000) //i am taking same value for all the bars as it'll be easier to catch when bars disappears
                }
            ]
        };
        var width = this.getRandomLabel().length * 50; //this will give each bar around 50px width and total width of the chart will go around 50000px
        return  <div style={{width: width}}>
                    <ScrollableChart
                        type={"bar"}
                        height={220}
                        width={width}
                        data={data}
                        getElementAtEvent={this.handleChartClick}
                        options={
                            {
                                maintainAspectRatio: false,
                                legend: {
                                    display: false
                                },
                                scales: {
                                    xAxes: [{
                                        gridLines: {
                                            display:false
                                        }
                                    }],
                                    yAxes: [{
                                        gridLines: {
                                            display:false
                                        }   
                                    }]
                                },
                                tooltips: {
                                    mode: 'index', 
                                    intersect: false
                                }
                            }
                        }
                    />
                </div>
    }

}

export default Observe;

screenshot produced by the result of the above code.

So, In case there is a max width limit in chart.js for drawable canvas, Can I get it work with any workaround or any fix that is applicable for this.

Thanks

score 1 · Accepted Answer · answered Jul 19 '20 at 12:48

Posting for anyone who will be struggling with similar issue in the future.

After a lot of research for last two days. I found out the problem was basically with the browser.

Actually there is a limit a browser can draw a canvas upto after that limit no draw command works and the chart is not drawn any further.

checkout below thread for details.

Maximum size of a <canvas> element

That was the details of the problem. And for solution, in our case we were fetching the data from an api and then was showing in the chart, so we restricted the the max data we can hold and started deleting elements previously loaded as more data is loaded. And that worked for us.

You can also check out this thread on github regarding this issue.

https://github.com/chartjs/Chart.js/issues/6068

Is there a max width of canvas Chart.js can draw charts within?

1 Answers1