/** * 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 ChartAnimation() { const frame = useCurrentFrame(); // Sample data points (can be replaced with your actual data) const data = [ { x: 0, y: 50, label: "Jan" }, { x: 1, y: 80, label: "Feb" }, { x: 2, y: 30, label: "Mar" }, { x: 3, y: 70, label: "Apr" }, { x: 4, y: 45, label: "May" }, { x: 5, y: 90, label: "Jun" }, { x: 6, y: 60, label: "Jul" }, { x: 7, y: 75, label: "Aug" }, { x: 8, y: 40, label: "Sep" }, { x: 9, y: 85, label: "Oct" }, ]; // Color palette for bars const colors = [ "#4361ee", "#3a0ca3", "#7209b7", "#f72585", "#4cc9f0", "#4895ef", "#560bad", "#b5179e", "#f15bb5", "#00b4d8", ]; // Chart dimensions const chartWidth = 900; const chartHeight = 500; const padding = 60; // Scale data to fit chart dimensions const xScale = (x: number) => (x / (data.length - 1)) * (chartWidth - padding * 2) + padding; const yScale = (y: number) => chartHeight - padding - (y / 100) * (chartHeight - padding * 2); const barWidth = ((chartWidth - padding * 2) / data.length) * 0.7; return (

{/* Chart title */}

Monthly Performance

{/* Chart subtitle */}

Data visualization for 2023

); }

Bar Chart

Install