[Chartjs]-How to scale label size radar chart chart.js

by

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

Leave a comment