Gallery
See what others have created
vanshu03
@vanshu03
Charting data
Design a dashboard chart module for a single business metric over time. The user should be able to scan the trend, compare one or two series, and understand what changed without leaving the page. Keep the chart as the main focus, with supporting controls close by and secondary data pushed below it.
Show the chart title, current metric, time range, and any active filters in the header. Use axis labels, a legend only when needed, and a tooltip or hover card that exposes the exact value and date. If the chart supports multiple series, make the contrast obvious through line style, color, or grouping—not just a legend key.
Include at least one alternate state such as a selected date range, filtered view, or zoomed-in segment. Also show what happens when there is no data or too little data to chart. The fallback should explain the problem and offer a clear next step, not just a blank canvas.
Add a small summary area or table beneath the chart for the numbers users will check after spotting a pattern. Keep the hierarchy tight: chart first, supporting data second, controls always reachable.
What to deliver
- Design a chart area with a clear title, metric, and time range.
- Add axis labels, legend, and hover details for the main series.
- Include at least one comparison state: filtered, selected, or zoomed.
- Show an empty or no-data state with a useful next step.
- Place supporting data in a table or summary row below the chart.
For an engaging design, explore the use of animated transitions when charting data as users interact with it. This can help emphasize data changes and make the experience more dynamic.