DataLiquid Glass
Line Chart
Pure SVG line series with glass chrome, grid, and point markers. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add line-chartLine + time period
Sessions line chart inside ChartFrame with 7D / 14D / 30D / 90D controls.
About this component
Line Chart is part of Data. Pure SVG line series with glass chrome, grid, and point markers.
Install with npx @intellihelper/cli@latest add line-chart. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Line Chart
Use when
- Use Line Chart when pure SVG line series with glass chrome, grid, and point markers.
- Tabular data, empty states, skeletons, and loading placeholders.
- Dense operational UIs where scanability matters.
Avoid when
- Narrative content better as cards or markdown.
- Tiny datasets that fit a simple list without table semantics.
Accessibility notes
- Tables need proper headers; empty states should explain next actions.
- Skeletons should be supplemented with aria-busy on the live region.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Show empty states with a clear primary action (e.g. add first item).
- Prefer progressive loading over layout shifts (reserve row height).