create a line chart component like this, it should use shadcn
I'll create a line chart component that matches the design in your image, using shadcn/ui components with an orange/amber color scheme.
I've created a line chart component that closely matches your design using shadcn/ui components 12. Here are the key features:
- Orange/Amber Theme: Uses amber colors throughout to match your design
- Nested Card Layout: Two-level card structure with rounded borders
- Smooth Line Chart: Uses Recharts LineChart with a smooth curve
- Interactive Elements: Hover tooltips and active dots on the line
- Status Indicators: "Trending up" and "1Y Change: 12%" badges
- Header Controls: "Stats mode" button and "45ml" indicator
- Responsive Design: Adapts to different screen sizes
The component uses sample financial data showing total assets over 12 months with an upward trend. You can easily customize the data, colors, and labels to match your specific requirements.
the design is just a wireframe, use a good theme, the balance sheet thing should be a dropdown, just mock the data it passes to the line chart, add tooltips, hover interactions to the line chart, eachg point represents one year. Make it look very professional
I'll create a professional financial dashboard component with a clean design, dropdown for metric selection, and rich interactions.
I've created a professional financial dashboard with the following features:
Professional Design:
- Clean, modern interface with proper spacing and typography
- Subtle shadows and borders for depth
- Professional color scheme using slate grays with accent colors
Interactive Features:
- Dropdown Selection: Choose between Total Assets, Revenue, and Net Income
- Rich Tooltips: Show detailed information including exact values and growth rates
- Hover Interactions: Active dots and highlighting on hover
- Responsive Design: Adapts to different screen sizes
Data Visualization:
- 6-Year Timeline: Each point represents one year (2019-2024)
- Multiple Metrics: Mock data for different financial indicators
- Growth Indicators: Year-over-year change with trend arrows
- Summary Statistics: Current value, total growth, and average annual growth
Professional Elements:
- Currency formatting with appropriate abbreviations (M for millions, B for billions)
- Grid lines and proper axis labeling
- Clean card-based layout
- Consistent color coding for different metrics
The component uses shadcn/ui components 1 for a cohesive, professional appearance and includes realistic financial data with proper growth patterns and formatting.