DEV Community

Cover image for Add a responsive revenue chart with Orchid Charts
Alexandr
Alexandr

Posted on

Add a responsive revenue chart with Orchid Charts

#javascript #webdev #showdev #chart

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
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

Source and setup on GitHub.

Top comments (0)