Shadcn.io is not affiliated with official shadcn/ui
React Line Chart with Custom Dots
Line chart with custom icon markers instead of circles
React Line Chart with Custom Dots preview
Beyond circles—icons that tell a story. This React line chart replaces standard dot markers with Lucide icons, adding semantic meaning to each data point. The GitCommitVertical icon creates a distinctive visual while maintaining the clean line aesthetic. Built with Recharts and a custom dot render function, you can use any icon, shape, or React component as markers. Perfect for Next.js dashboards where data points represent distinct events—commits, deployments, milestones, or any metric where you want visual character beyond plain dots.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this chart for you — no copy-paste, no CLI:
use shadcnio to install the line-dots-custom chart into my projectRelated Components
Line Chart with Dots
Standard circular markers
Colored Dots Line Chart
Different colors per point
Simple Line Chart
Clean line without markers
Line Chart with Labels
Text labels at points
Area Chart with Icons
Icons in legend
Multiple Line Chart
Multiple lines with icons
FAQ
Was this page helpful?
Sign in to leave feedback.