Why dopes my graph stretch vertical infinitely even though I set maintainAspectRatio to false?

I am using react-chartjs-2 to build a graph on my react app. I set the … Read more Why dopes my graph stretch vertical infinitely even though I set maintainAspectRatio to false?

I am using react-chartjs-2 to build a graph on my react app. I set the options and did everything. But when the app run, the graph starts to stretch vertically, that I have to stop the server.

here i set an object of options

const options = {
    maintainAspectRatio: false,
    legend: {
        display: false,
    },
    elements: {
        point: {
        radius: 0,
    },
},
    tooltips: {
        mode: "index",
        intersect: false,
        callbacks: {
            label: function(tooltipItem, data){
                return numeral(tooltipItem.value).format("+0,0");
            },
        },
    },
    scales: {
        xAxes: [
            {
                type: "time",
                time: {
                    format: "MM/DD/YY",
                    tooltipFormat: "ll",
                },
            },
        ],
        yAxes: [
            {
                gridLines: {
                    display: false,
                },
                ticks: {
                    callback: function(value, index, values){
                        return numeral(value).format("0a");
                    },
                },
            },
        ],
    },

};

and then passed it to the property here like this

 <Line options={options}
                 width={100}
                 height={50}
                 data={{
                    datasets: [
                        {backgroundColor: "rgba(204, 16, 52, 0.5)", borderColor:"#cc1034", 
                       data: data}
                    ],
                }}/>

Source: React – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *