/** * Free Remotion Template Component * --------------------------------- * This template is free to use in your projects! * Credit appreciated but not required. * * Created by the team at https://www.reactvideoeditor.com * * Happy coding and building amazing videos! 🎉 */ "use client"; import { interpolate, useCurrentFrame } from "remotion"; export default function PieChart() { const frame = useCurrentFrame(); const segments = [ { label: "Product A", value: 35, color: "#4361ee" }, { label: "Product B", value: 25, color: "#7209b7" }, { label: "Product C", value: 20, color: "#f72585" }, { label: "Product D", value: 12, color: "#4cc9f0" }, { label: "Product E", value: 8, color: "#a855f7" }, ]; const total = segments.reduce((sum, s) => sum + s.value, 0); const cx = 300; const cy = 220; const radius = 140; const circumference = 2 * Math.PI * radius; let cumulativeOffset = 0; return (

{/* Title */}

Market Share

{/* Legend */}

{segments.map((segment, i) => { const legendOpacity = interpolate( frame, [5 + i * 10, 15 + i * 10], [0, 1], { extrapolateRight: "clamp", extrapolateLeft: "clamp" } ); return (

{segment.label} ({segment.value}%)

); })}

); }

Pie Chart

Install