/** * 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 LineChart() { const frame = useCurrentFrame(); const data = [ { x: 0, y: 25, label: "Jan" }, { x: 1, y: 40, label: "Feb" }, { x: 2, y: 35, label: "Mar" }, { x: 3, y: 55, label: "Apr" }, { x: 4, y: 50, label: "May" }, { x: 5, y: 70, label: "Jun" }, { x: 6, y: 65, label: "Jul" }, { x: 7, y: 80, label: "Aug" }, { x: 8, y: 75, label: "Sep" }, { x: 9, y: 90, label: "Oct" }, ]; const chartWidth = 900; const chartHeight = 500; const padding = 70; const xScale = (x: number) => (x / (data.length - 1)) * (chartWidth - padding * 2) + padding; const yScale = (y: number) => chartHeight - padding - (y / 100) * (chartHeight - padding * 2); // Build polyline points const points = data.map((d) => `${xScale(d.x)},${yScale(d.y)}`).join(" "); // Calculate total polyline length (approximate) let totalLength = 0; for (let i = 1; i < data.length; i++) { const dx = xScale(data[i].x) - xScale(data[i - 1].x); const dy = yScale(data[i].y) - yScale(data[i - 1].y); totalLength += Math.sqrt(dx * dx + dy * dy); } // Animate line drawing const dashOffset = interpolate(frame, [0, 60], [totalLength, 0], { extrapolateRight: "clamp", }); return (

{/* Chart title */}

Revenue Growth

); }

Line Chart

Install