I made a spinning wheel using chart.js pie chart and it works flawlessly on pc – basically am drawing a pie chart with datalabels for each option, and then spinning the chart accordingly. The problem comes when i try it on my mobile phone – the animation is very choppy.
"use client";
import { useEffect, useRef, useState } from "react";
import { Chart, registerables } from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
Chart.register(...registerables, ChartDataLabels);
const WheelChartMobile = ({ segments, segColors, winningSegment, onFinished }) => {
const wheel = useRef(null);
const spinBtn = useRef(null);
const [chart, setChart] = useState(null);
const rotationValues = segments.map((_, index) => {
return {
minDegree: (index * 360) / segments.length,
maxDegree: ((index + 1) * 360) / segments.length,
value: segments[index],
};
});
console.table(rotationValues);
const data = new Array(rotationValues.length).fill(1);
const pieColors = segColors;
useEffect(() => {
if (!wheel.current) return;
const ctx = wheel.current.getContext("2d");
const chartInstance = new Chart(ctx, {
plugins: [
ChartDataLabels,
{
id: "customImageLabels",
afterDraw: (chart) => {
const {
ctx,
chartArea: { left, right, top, bottom, width, height },
} = chart;
const centerX = (left + right) / 2;
const centerY = (top + bottom) / 2;
const radius = Math.min(width, height) / 2;
chart.data.labels.forEach((label, index) => {
const allowed = ["bones", "zrpy", "xrp"];
if (!allowed.includes(label.split(" ")[1])) return;
const angle =
(chart.getDatasetMeta(0).data[index].startAngle +
chart.getDatasetMeta(0).data[index].endAngle) /
2;
const img = new Image();
if (label.endsWith("bones")) {
const imageX = centerX + Math.cos(angle) * radius * 0.35;
const imageY = centerY + Math.sin(angle) * radius * 0.35;
img.src = "/images/wheel/bone.png";
img.onload = () => {
ctx.drawImage(img, imageX - 10, imageY - 10, 20, 20);
};
ctx.drawImage(img, imageX - 10, imageY - 10, 20, 20); //image isnt drawn while wheel is spinning, thats why i draw the image a second time even after using onload
} else if (label.endsWith("zrpy")) {
const imageX = centerX + Math.cos(angle) * radius * 0.37;
const imageY = centerY + Math.sin(angle) * radius * 0.37;
img.src = "/images/zerpaay.png";
img.onload = () => {
ctx.drawImage(img, imageX - 11, imageY - 10, 23, 23);
};
ctx.drawImage(img, imageX - 11, imageY - 10, 23, 23);
} else if (label.endsWith("xrp")) {
img.src = "/images/xrp.png";
const imageX = centerX + Math.cos(angle) * radius * 0.38;
const imageY = centerY + Math.sin(angle) * radius * 0.38;
img.onload = () => {
ctx.drawImage(img, imageX - 15, imageY - 15, 30, 30);
};
ctx.drawImage(img, imageX - 15, imageY - 15, 30, 30);
}
});
},
},
{
id: "customCanvasBackgroundImage",
afterDraw: (chart) => {
const rimImage = new Image();
rimImage.src = "/images/wheel/rim.png";
const ctx = chart.ctx;
ctx.save();
ctx.drawImage(rimImage, -25, -30, 343, 343);
rimImage.onload = () => {
ctx.drawImage(rimImage, -25, -30, 343, 343);
};
ctx.restore();
},
},
],
type: "pie",
data: {
labels: segments,
datasets: [
{
backgroundColor: pieColors,
data: data,
},
],
},
options: {
responsive: true,
animation: { duration: 0 },
rotation: -90,
plugins: {
tooltip: false,
legend: { display: false },
datalabels: {
color: "#ffffff",
formatter: (value, context) => {
if (
context.chart.data.labels[context.dataIndex].endsWith("bones")
) {
return context.chart.data.labels[context.dataIndex].replace(
"bones",
" "
);
} else if (
context.chart.data.labels[context.dataIndex].endsWith(
"liscense"
)
) {
return context.chart.data.labels[context.dataIndex].replace(
"liscense",
"liscense "
);
} else if (
context.chart.data.labels[context.dataIndex].endsWith("zrpy")
) {
return context.chart.data.labels[context.dataIndex].replace(
"zrpy",
" "
);
} else if (
context.chart.data.labels[context.dataIndex].endsWith("xrp")
) {
return context.chart.data.labels[context.dataIndex].replace(
"xrp",
" "
);
} else {
return context.chart.data.labels[context.dataIndex];
}
},
font: (context) => {
const index = context.dataIndex;
const width = context.chart.width + 10;
const size = Math.round(width / 25);
if (segments[index].endsWith("bones")) {
return {
size: size + 10,
family: "Bowlby One SC",
};
} else if (segments[index].endsWith("zrpy")) {
return {
size: size + 10,
family: "Bowlby One SC",
};
} else if (segments[index].endsWith("xrp")) {
return {
size: size + 10,
family: "Bowlby One SC",
};
} else {
return {
size: size,
family: "Bowlby One SC",
};
}
},
align: "center",
rotation: (context) => {
const wheelRotation = context.chart.options.rotation; // Get current rotation of the wheel
const segmentIndex = context.dataIndex;
const segmentAngle = 360 / segments.length;
const rotation =
wheelRotation + segmentIndex * segmentAngle + 110;
return rotation;
},
// clip: true,
},
},
borderColor: "#000",
},
});
setChart(chartInstance);
return () => {
chartInstance.destroy();
setChart(null);
};
}, [wheel]);
let count = 0;
let resultValue = 101;
const spin = () => {
spinBtn.current.disabled = true;
wheel.current.classList.add("wheel-blur");
let rotationInterval = setInterval(() => {
if (chart) {
chart.options.rotation += resultValue;
chart.update();
let currentWinner = null;
const angle = 180 / Math.PI + 2;
chart.getDatasetMeta(0).data.forEach((datapoint, index) => {
const netStartAngle = (datapoint.startAngle * angle) % 360;
const netEndAngle = (datapoint.endAngle * angle) % 360;
if (280 > netStartAngle && 280 < netEndAngle) {
currentWinner = chart.data.labels[index];
}
});
if (chart.options.rotation >= 360) {
count += 1;
resultValue -= 5;
chart.options.rotation = 0;
}
if (count >= 19 && currentWinner === winningSegment) {
clearInterval(rotationInterval);
count = 0;
resultValue = 101;
if (currentWinner) {
onFinished(currentWinner);
}
wheel.current.classList.remove("wheel-blur");
}
//also spin the button with the wheel
spinBtn.current.style.transform = `translate(-50%, -50%) rotate(${chart.options.rotation}deg)`;
chart.update();
}
}, 10);
};
useEffect(() => {
//find the middle of chart and place the button there
if (chart) {
const {
chartArea: { left, right, top, bottom, width, height },
} = chart;
const centerX = (left + right) / 2;
const centerY = (top + bottom) / 2;
spinBtn.current.style.left = `${centerX}px`;
spinBtn.current.style.top = `${centerY}px`;
}
}, [chart]);
return (
<div className="wrapper">
<div className="container font-bowlbyUp">
<canvas id="wheel" ref={wheel} className="mt-[10%]"/>
<button id="spin-btn" ref={spinBtn} onClick={spin} />
</div>
</div>
);
};
export default WheelChartMobile;
I tried using requestAnimationFrame to optimize it for mobile – but the problem persists, is there any better way to create a spinning wheel with dynamic options? I also tried reducing the setInterval delay from 10 to 20/30/40 ms – but it still doesnt work smoothly, maybe the excessive number of images is a problem?