I’m trying to make a Radar Chart using react and ChatJs. It works just fine on bigger screens, but on mobile phone the chart is too small. How could I remove the blank spaces(Example on image) and make the chart bigger(As example the line red)?
Code:
// RadarChart.js
import React from 'react';
import { Radar } from 'react-chartjs-2';
import {
Chart,
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
} from 'chart.js';
Chart.register(
RadialLinearScale,
PointElement,
Legend,
Filler,
LineElement,
Tooltip,
);
Chart.defaults.font.size = '16';
Chart.defaults.color = 'black';
const RadarChart = () => {
const data = {
labels: ['Running', 'Swimming', 'Cycling', 'Reading'],
datasets: [
{
data: [80, 30, 100, 65],
borderWidth: 1,
},
],
};
// Chart options
return (
<Radar
data={data}
options={{
plugins: {
tooltip: {
callbacks: {
label: function (tooltipItems) {
return 'Result: ' + tooltipItems.raw + '%';
},
},
},
legend: {
display: false,
},
title: {
text: 'Title Here',
display: true,
font: { size: 24 },
},
},
responsive: true,
}}
className='rounded-md bg-zinc-300'
/>
);
};
export default RadarChart;