Financial Dashboard with Toggleable Chart Categories

I'll create a financial dashboard component using shadcn charts that allows toggling different financial metrics on and off, similar to the image you shared.

How It Works

I've created a financial dashboard component using shadcn's chart components 1 that allows you to toggle different financial metrics on and off in the chart:

1. Chart Visualization: The dashboard displays a line chart showing financial metrics over time from 2020 to 2024, matching the Danish financial terms from your image.
2. Toggle Functionality: Each metric can be toggled on/off using checkboxes below the chart. By default, "Egenkapital i alt" (Total Equity) and "Status balance" (Balance Sheet Total) are active, matching your image.
3. Financial Metrics Panel: The right side shows the current values for each metric, with the selected year (2024-12) displayed at the top.
4. Navigation Controls: The top of the card includes navigation buttons and chart type toggles, similar to your image.
5. Responsive Design: The layout adjusts for different screen sizes, with the metrics panel moving below the chart on smaller screens.

Key Features

• Interactive Chart: Uses shadcn's ChartContainer and ChartTooltip components for consistent styling 1
• Toggleable Categories: Each financial metric can be shown/hidden independently
• Highlighted Selection: Active metrics are highlighted in the side panel
• Danish Financial Terms: Uses the same terminology as in your image
• Formatted Numbers: Numbers are formatted with thousand separators in Danish style

You can easily customize the data, colors, and metrics to match your specific requirements.

I'll replace the checkboxes at the bottom with a proper color legend that allows toggling the metrics. Here's the updated component:

Now I've replaced the checkboxes with a more visually appealing legend that shows color indicators for each metric. Here's what changed:

1. Color Indicators: Each legend item now displays a colored circle that matches the line color in the chart.
2. Interactive Legend: The entire legend item (color + label) is clickable to toggle the visibility of that metric on the chart.

3. Visual Feedback:

   • Active metrics have a light background highlight
   • Inactive metrics show a hover effect when you mouse over them
   • The cursor changes to indicate the items are clickable
4. Responsive Layout: The legend now uses flex-wrap to better handle different screen sizes and number of metrics.

This change makes the chart more intuitive and visually consistent with standard charting conventions. Users can easily see which color corresponds to which metric and toggle them on/off by clicking directly on the legend items.