metrics-graphics

MetricsGraphics is a JavaScript library for creating clean, consistent data charts on web pages. It focuses specifically on time-series data, which means data where values change over time, such as daily website visits, monthly revenue, or sensor readings over hours. The library supports line charts, scatterplots, histograms, and rug plots (small tick marks along an axis that show where data points are concentrated).

The library is intentionally small, around 15 kilobytes when compressed, so it does not add much weight to a web page. The design goal, as described in the README, is to produce charts in a principled and consistent way, meaning the library makes visual decisions for you so all your charts look coherent without requiring extensive configuration.

Using it is straightforward: you add a container element to your HTML page, then in your JavaScript you import the chart type you want, pass it your data array and a few settings like width, height, and which fields in your data map to the horizontal and vertical axes, and the chart renders inside that container. The README shows the complete working code for a line chart in about ten lines.

For developers who want to go beyond the defaults, the library exposes documented components and utility functions for extending its behavior. The project is organized as a Yarn Workspace, a setup that keeps multiple related packages in one repository, with separate packages for the library itself and for the interactive examples.