A versatile and elegant line chart component that brings data visualization to life with smooth animations and precise customization options. Perfect for displaying trends, statistics, or any numerical data series with style in your Framer projects.

✨ Key Features

• Pure SVG Implementation: Built using native SVG elements - no external charting libraries required
• Smooth Animations: Beautiful path drawing animation with configurable transitions
• Gradient Areas: Fill the chart under the line with a gradient color
• Customizable Line Smoothing: Toggle between straight and curved lines with adjustable smoothness
• Scroll-Based Animations: Trigger animations when the chart comes into view
• Responsive Design: Automatically adapts to any container size
• Precise Control: Full control over chart dimensions, colors, and line properties

💡 Pro Tips

1. Use the smoothness control to find the perfect balance between sharp and curved lines for your data
2. Adjust the "In View Animation" amount to control when the animation triggers while scrolling
3. Fine-tune the transition animation for the perfect drawing effect:
   • Use spring animations for bouncy, energetic effects
   • Choose easeInOut for smoother, more professional transitions
4. Match the stroke width to your design's visual weight

🎨 Styling Options

• Line Properties: Stroke color and width, smoothing and curvature, animation timing and easing
• Chart Layout: Custom viewBox dimensions, flexible scaling, background color, gradient area
• Data Visualization: Custom min/max Y values, variable number of data points, automatic data normalization

This component brings professional data visualization capabilities to your Framer projects with zero coding required, while maintaining the flexibility to achieve pixel-perfect designs through the intuitive property controls.