LINE
App Store Downloads
Latest month
Dec
- Downloads
- 116k
- Plan
- 86k
- Previous year
- 59k
Charts That Belong in Your Product.
Turn everyday product data into clear, interactive charts without turning chart configuration into a project. One small API covers trends, comparisons, composition, activity, and planning.
The Charts Product Work Needs.
Choose the shape that makes the answer obvious. Every type below keeps the same responsive behavior for tooltips, selection, updates, and SVG export.
Cartesian
Radial
Time
Calendar
Is the Product Moving in the Right Direction?
MULTI-SERIES LINE
Subscription Growth
LINE · REGION
Healthy Latency Range
LINE · MARKER
Activation Target
MIXED
Store Visits, Plan, and Capacity
MIXED · DUAL AXIS
Account Balance Movement
TIMESHEET
App Release Plan
Where Should the Team Look First?
BAR
Notifications by App
GROUPED BAR
Delivery Time by Region
STACKED BAR
Order Fulfillment
SCATTER
Price and Battery Life
BUBBLE
App Portfolio
RADAR
Phone Comparison
What Is the Whole Made Of?
POLAR AREA
Screen Time
PIE
Website Traffic
DONUT
Subscription Plans
PERCENTAGE
iPhone Storage
HEATMAP
Daily Contributions
Less Chrome. Same Chart.
Every omitted element is visible in configuration: axes, grid, labels, legend, dots, and tooltip
are each set to false.
Learn It Once.
Use It Everywhere.
Change the numbers, switch the chart, or try a dark surface. The code follows your changes. Axes, tooltips, and keyboard navigation are already included.
Hover a value, or focus the chart and use ← →.
The code behind this chart
Add <div id="your-chart"></div> to your page, then:
import { LineChart } from "@orchidsoftware/charts";
import "@orchidsoftware/charts/style.css";
const chart = LineChart.make("#your-chart")
.labels(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"])
.dataset("Revenue", [4, 8, 15, 16, 23, 42, 108])
.colors(["#8267aa"])
.height(260)
.render();CSS for this surface
The controls and card belong to this demo. Orchid renders the chart inside.
One familiar API. Change the type. Keep the data and the methods you already know.
Your product’s theme. Set surface colors with CSS variables. Keep data colors explicit.
Ready to share. Export the current SVG with its styles, straight from the chart.
A small library for everyday product work.
Choose Orchid for dashboards, reports, activity calendars, and release plans that share one visual language. You get twelve SVG chart types, a fluent API, and product defaults in one dependency-free, MIT-licensed package.
Start with one screen and the data you already have. Connect it to React, Vue, or Hotwire ↗