CODEWITHSUNDEEP
chartschart.js
Maicon Furtado
Maicon Furtado

Reputation: 338

Chart.js is always increasing height on chart.resize()

I added chart.resize() inside of addData and removeData function, but it is always increasing height and it is never decreasing!

I am updating the chart when the user click on item of the menu. Some items have more than 100 datas e some others items have only 2 data and when have few data, the chart is always increasing height:

horizontalBar

Why is this happening?

<canvas id="chart"></canvas>
var chartData = {
            labels: [<?php echo '"'.implode('","',  $chart_labels ).'"' ?>],
            datasets: [
                {
                    data: [<?php echo implode(',',  $chart_numbers ) ?>],
                    backgroundColor: '#184b8f',
                    hoverBackgroundColor: '#ef3e42'
                }
            ]
        };

        var barOptions = {
            responsive: true,
            maintainAspectRatio: false,
            tooltips: {
                enabled: false
            },
            hover: {
                animationDuration: 0
            },
            legend: {
                display: false
            },
            scales : {
                xAxes : [{
                    gridLines : {
                        display: false
                    },
                    ticks: {
                        beginAtZero: true,
                        color: '#cfcfcf'
                    }
                } ],
                yAxes : [ {
                    gridLines : {
                        display: false
                    },
                    ticks: {
                        fontSize: 13,
                        fontFamily: "'Open Sans'",
                        fontWeight: 600,
                    }
                }]
            },
            animation: {
            duration: 500,
            easing: "easeOutQuart",
            }
        };

        function removeData(chart) {
            chart.data.labels.pop();
            chart.data.datasets.forEach((dataset) => {
                dataset.data.pop();
            });
            chart.resize();
            chart.update();
        }

        function addData(chart, label, data) {
            chart.data.labels.push(label);
            chart.data.datasets.forEach((dataset) => {
                dataset.data.push(data);
            });
            chart.resize();
            chart.update();
        }

        var ctx = document.getElementById("chart").getContext("2d");
        var myBar = new Chart(ctx, {
                        type: 'horizontalBar',
                        data: chartData,
                        options: barOptions
                    });

Upvotes: 12

Views: 16616

Answers (4)

Francesco Leto
Francesco Leto

Reputation: 46

In laravel livewire i fixed adding wire:ignore to wrapper div

<div wire:ignore>
    <div class="chart-container" style="height: 80vh; width: 80vh;">
       <canvas id="bar-chart" height="800" width="1500"></canvas>
    </div>
</div>

Upvotes: 1

frankfurt-laravel
frankfurt-laravel

Reputation: 4131

I was having the same issue in a Bulma tile.

The fix was to set responsive: false in the Chart.js script options area.

Upvotes: -2

Mikel Granero
Mikel Granero

Reputation: 419

I've found some users had the same issue in this post: https://github.com/jtblin/angular-chart.js/issues/84

The solution for me was to change the chart's options to maintainAspectRatio: false.

    myChart.setOptions({
        responsive: true,
        maintainAspectRatio: false
    });

Upvotes: 6

idontknow
idontknow

Reputation: 1106

I had the same thing. You have to put an empty div around the canvas.

Upvotes: 51

Related Questions