i am using chart.js and react-chartjs-2. I have this polar chart and a dropdown at top left, as seen in the screenshots, they get resized due to long labels. when I give an empty array to display no labels, so the chart size stays the same, and the labels are the issue here.
is there any way to make the chart stay always the same size regardless of length of labels ?
I have tried setting maintainAspectRatio: false
, using fixed dimensions for chart and parent of chart, I already have min max values, some of other questions on SO (link) but did not solve it.
here is my options object;
{
elements: {
arc: {
offset: -160,
},
},
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
min: 0,
max: 10,
beginAtZero: true,
ticks: {
display: false, // 0-10 scale,
},
grid: {
display: true,
color: function (ctx: ScriptableScaleContext, _options: AnyObject) {
if (ctx.index === 10) return "rgba(27,22,70,0.4)";
if (ctx.index === 6) return "rgba(249,35,7,0.4)";
return "rgba(222,222,222,0.5)";
},
},
angleLines: {
display: false,
},
pointLabels: {
display: true,
callback: function (label: string) {
return label; // Customize the label if needed
},
centerPointLabels: true,
font: function () {
return { size: 13 };
},
},
},
},
plugins: {
legend: {
display: false,
},
datalabels: {
anchor: "end",
align: "start",
color: "white",
font: {
// weight: "bold",
size: 24,
},
},
},
and here is my data object;
const perceptionDataGesundheit: ChartData<"polarArea", number[], string[]> = {
labels: labels_gesundheit,
datasets: [
{
label: "Perception",
backgroundColor: color_perception,
borderColor: color_perception,
borderWidth: 0,
data: [7.2, 6.1, 7.7],
spacing: 160,
},
],
}