Reduce dimension of graph with react-chartjs-2 and chart.js

Question

I'm having a problem. I'm trying to reduce the dimension of a chart (radial or spider, as you want to call it). As is possible to see from the image here it takes too much space of the page. I'm wondering if is possible to reduce de dimension by a factor 1/2. So for example from 100% to 50% of the dimension.

import { useState } from 'react';
import { Container, Row, Table, Button } from 'react-bootstrap';
import {
    Chart as ChartJS,
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend,
} from 'chart.js';
import { Radar } from 'react-chartjs-2';

ChartJS.register(
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend
);

function RadarChartPage(props) {

    const handleFilterButton = (category) => {
        if (props.selectedFilters.includes(category)) {
            let filters = props.selectedFilters.filter((el) => el !== category);
            props.setSelectedFilters(filters);
        } else {
            props.setSelectedFilters([...props.selectedFilters, category]);
        }
    };



    const data = {
        labels: ["Agile Development Teams", "CI/CD", "Embedded SW Integration", "Model Based SW Development", "SW Development", "SW Architecture Design", "AI & Machine Learning", "Signal & Data Collection", "SW Life Cycle Management", "ASPICE", "Rapid Prototyping"],
        datasets: [
            {
                label: "Software Process",
                fill: true,
                data: props.Data,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1,
            },
        ],
    };

    const options = {
        scales: {
            r: {
                angleLines: {
                    display: false
                },
                suggestedMin: 0,
                suggestedMax: 5,
                ticks: {
                    // For a category axis, the val is the index so the lookup via getLabelForValue is needed
                    callback: function (val, index) {
                        // Hide every 2nd tick label
                        return index % 2 === 0 ? this.getLabelForValue(val) : '';
                    },
                    color: 'black',
                }

            }
        },
        // Per nascondere la legenda
        plugins: {
            legend: {
                display: true,
            }
        },
        responsive: true, // Imposta la dimensione del canvas in base al suo contenitor
        maintainAspectRatio: true,
    };

    return (
        <>
            <Container>
                <div >
                    <br />
                    <br />
                    <br />
                    <br />
                    {props.Data ? (
                        <>
                            <Container style={{height: "20px"}}>
                                <Row>
                                    <div className='centered'>
                                        {props.possibleFilters.map((value, index) => (
                                            <Button key={index} className={props.selectedFilters.includes(value) ? "btns active" : "btns"}
                                                onClick={() => handleFilterButton(value)}
                                            >{value}</Button>
                                        ))}
                                    </div>
                                </Row>

                                <Row>
                                    <Radar data={data} options={options} />
                                </Row>

                            </Container>
                        </>

                    ) : (
                        <div>No File is uploaded yet!</div>
                    )}
                </div>

            </Container >
        </>
    );

As is possible to see I have tried using style on the container: <Container style={{height: "20px"}}> Or with maXHeight ecc but nothing changes

Answer 1

Always use maintainAspectRatio: false, when you want to customize the size, else it will always consider a 2:1 ratio by default.