Create a component using shadcn charts like the image. Different categories should be able to be toggled and shown on the chart, like "Bruttofortjeneste" on the image.
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.
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:
You can easily customize the data, colors, and metrics to match your specific requirements.
Add a legend color instead of the checkbox on the bottom
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:
Visual Feedback:
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.
Make the chart responsive. On small screens the chart lines and years overflows