dv-scalebar

comes in two flavours

As a framework-agnostic web component, and as a Vue component with minimal overhead.

Versatile

The scalebar allows for vertical and horizontal usage. It scales responsive and allows styling via CSS variables.

Reasonable defaults and internal matching of colors, labels, ticks and classes keeps the configuration to a minimum.

The size of 69kB (26kB gzip) can be lowered to 26kB (9kB gzip) when chroma-js is externally available already.