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
• 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
• Zero Configuration Required: Works out of the box with simple number arrays

💡 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
5. Use the viewBox controls to adjust the chart's aspect ratio and data scaling
6. Set the background color to match your design system while maintaining transparency

🎨 Styling Options

• Line Properties: Stroke color and width, smoothing and curvature, animation timing and easing
• Chart Layout: Custom viewBox dimensions, flexible scaling, background color
• 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.