I maintain Orchid Charts, a JavaScript library for SVG charts in dashboards and reports. Give it labels and values, and it renders a chart with axes and tooltips that follows its container’s width. CSS variables let you match the labels, grid, and tooltips to your interface.
Try the live demo. Change the numbers, switch between line and bar, and try a dark background. The matching JavaScript and theme CSS are shown alongside the chart.
Here’s a small example with sample revenue data. Install the package in an app whose bundler supports CSS imports:
npm install @orchidsoftware/charts
Add <div id="revenue"></div> to your page, then run this after the element exists:
import { LineChart } from "@orchidsoftware/charts";
import "@orchidsoftware/charts/style.css";
const revenue = LineChart.make("#revenue")
.title("Monthly revenue ($)")
.labels(["Jan", "Feb", "Mar", "Apr", "May", "Jun"])
.dataset("Revenue", [42000, 48000, 57000, 63000, 68000, 76000])
.render();
The cover adds a smoothed line, gradient fill, and custom colors. Its card and background are ordinary HTML and CSS. The customization guide explains the styling options.
You can update the chart when your data changes, or download it as an SVG for a report. The exported SVG keeps the chart’s colors and styling. The package includes TypeScript declarations and has zero runtime dependencies.
