Multi-Line Comparison Chart

Shadcn UI Chart Card Block

ChartCard6 is a multi-line chart card comparing two data series over time. The chart shows two lines with a legend at the bottom identifying each series. The current period uses a solid line while the comparison period uses a dashed line for visual distinction.

Light card surface with lines using contrasting chart colors. The primary series uses a solid stroke while the secondary uses a dashed pattern creating clear visual hierarchy. Data points are marked with small dots that enlarge on hover. The legend uses the shadcn chart legend component positioned below the chart. Grid lines are horizontal only.

This chart is designed for year-over-year or period-over-period comparisons. The solid vs dashed line treatment is a common convention that users understand intuitively. The legend provides clear labeling. Useful for showing growth, comparing performance periods, or tracking progress against benchmarks.

The chart handles hover states with enlarged active dots. Tooltips show values for both series at each point. The legend is interactive and can toggle series visibility.