dart - How do I make this graph in flutter? - Stack Overflow

admin管理员组

文章数量:1415664

I am working on a Flutter project where I need to replicate the graph shown in the attached image. I've tried using both Syncfusion Flutter Charts and fl_chart, but I couldn't find a way to perfectly match the design and behavior.

The graph appears to be a multi-level stacked bar chart with different colored segments representing various states (e.g., stress levels). It has a time-based x-axis (showing timestamps like 11:12 PM and 9:30 AM). The y-axis seems to represent levels or categories of stress over time. Each color represents a different state, and some bars are stacked while others are singular. The legend below provides a breakdown of the total duration for each state, along with percentages.

I've tried Syncfusion Charts and looked into stacked column charts, but couldn't achieve the exact styling and layout. I also tried fl_chart with bar charts but struggled with multi-layered segments and alignment with time-based data.

Is there any existing Flutter package that can better replicate this graph? Would CustomPainter be a better approach to fully customize the rendering? How can I efficiently manage time-based data in a stacked graph format like this?

Any suggestions, code snippets, or guidance would be greatly appreciated!

本文标签： dartHow do I make this graph in flutterStack Overflow