How to scale label size radar chart chart.js

Question

I want to scale the labels in my radar chart because it is becoming very skewed and messed up on mobile devices , so I write this in ComponentDidMount()

const plugins = [{
    beforeDraw: function(c) {
        var chartHeight = c.chart.height;
        c.scale.pointLabels.fontSize = chartHeight * 6 / 100;
    }
}];

this.setState({ aggdata:data, options:options, plugins:plugins })

I attach this plugin to my radar chart like this:

<Radar
    plugins={this.state.plugins}
    data={this.state.aggdata}
    options={this.state.options}
/>

These are my options

const options = {
    responsive: true,
    maintainAspectRatio: false,
    scale: {
        gridLines: {
            color: "rgba(0, 0, 0, 0.3)"
        },
        angleLines: {
            color: "rgba(0, 0, 0, 0.3)"
        },
        pointLabels: {
            fontStyle: "bold",
            fontSize: "15"
        }
    }
};

But it is not working , any help or hint will be appreciated

Edit attempt :

render() {
        const show = this.state.render;
        if(show) {

        return ( <Radar  plugins={this.state.plugins} data={this.state.aggdata} options={this.state.options}/> )

        }
        else{
       return(<h3>Loading....</h3>)
        }

      
    }

Answer 1

So assuming that you're using a class component, this is my suggestion

class ExampleComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            shouldRender: false, 
        };
    }

    get options() {
        return {
            responsive: true,
            maintainAspectRatio: false,
            scale: {
                gridLines: {
                    color: "rgba(0, 0, 0, 0.3)"
                },
                angleLines: {
                    color: "rgba(0, 0, 0, 0.3)"
                },
                pointLabels: {
                    fontStyle: "bold",
                    fontSize: "15"
                }
            }
        }
    }

    get plugins() {
        return [{
            beforeDraw: function(c) {
                var chartHeight = c.chart.height;
                c.scale.pointLabels.fontSize = chartHeight * 6 / 100;
            }
        }];
    }

    componentDidMount() {
        const data = // ...your data
        this.setState({ data, loaded: true })
    }


    render() {
        const { data, loaded } = this.state;
        if (!loaded) return <h3>Loading....</h3>;

        return (
            <Radar
                data={data}
                plugins={this.plugins}
                options={this.options}
            />
        );
    }
}

I haven't tried this code, but I ask you @aryan-agarwal to try it and if it gives any error whatsoever to comment pls