React-chartjs-2: How to set automatic width to the bar chart

[souuu]

Hello,
The problem is that I have too many labels sometimes (it depends on the request).
when I have more than 200 labels :

only 3 labels :

So, I want to set automatic width to the component so it always fits all the labels ( the parent div is set to overflow-x:scroll , so there is no problem even if the width is more than 5000)

Thank you,

[eudson]

@souuu where you able to fix this?

[souuu]

Hello,
Yes I have fixed this.
I have made a function in the component called calculateWidth()
which returns the width depending on the count of lables.
So after some tests I have defined manually what are the counts that make problems.

            <div className="scroll-horizental-histo">
                <Bar
                    height={400}
                    width={this.calculateWidth()}
                    data={data}
                    options={options}
                />
            </div>

    .scroll-horizental-histo {
      overflow-x: scroll;
    }



md5-abea0460962e276c0d6b120d6be4d7fa



        const options = {
            legend: {
                display: false
            },
            responsive: false,
            tooltips: {
                mode: 'label'
            },
            elements: {
                line: {
                    fill: false
                }
            },
            scales: {
                xAxes: [
                    {
                        barThickness: 'flex',
                        display: true,
                        gridLines: {
                            display: false
                        },
                        labels: x,
                        ticks: {
                            autoSkip: false,
                            maxRotation: 45,
                            minRotation: 45
                        }
                    }
                ],
                yAxes: [
                    {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        id: 'y-axis-1',
                        gridLines: {
                            display: true
                        },
                        labels: {
                            show: false
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }
                ]
            }
        }



md5-abea0460962e276c0d6b120d6be4d7fa



    calculateWidth() {
        const { x } = this.props
        let length = x ? x.length : 0
        switch (true) {
            case length >= 0 && length <= 3:
                return 400
            case length >= 4 && length <= 50:
                return 1200
            case length >= 51 && length <= 100:
                return 2000
            default:
                return 5000
        }
    }

I am here for any question

[eudson]

Does this make the chart to be horizontal scrollable? I will give a try

[Pringels]

Closing. Reason: older than 6 months and not enough or outdated information supplied. Please re-open this issue if the problem persists, but provide more information. (including a sandbox link if possible)