I’m using chartjs on my React project and I’m trying to make it responsive (I’m also working with material UI) I was wondering if someone can help me.
Here is part of my code. This is how I create my chart on my component
const createChart = (containerId, data, chartType) => {
const ctx = document.getElementById(containerId).getContext("2d");
new Chart(ctx, {
type: chartType,
data: {
labels: data.labels,
datasets: [
{
label: chartType === "radar" ? "Ajuste Cultural" : "KPIS",
data: data.values,
backgroundColor: data.colors,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
},
});
};
and this is how I apply it to the MUI BOX
<Box
// class="chart-container"
// style={{ position: "relative" }}
border={"5px solid blue"}
flex={1}
marginLeft={{ sm: "10px", xs: "0px" }}
>
<canvas id="culturalFitChart" width="200" height="100"></canvas>
</Box>
<Box border={"5px solid blue"} flex={1}>
<canvas id="kpisChart" width="200" height="100"></canvas>
</Box>
thank you