Lume is an open-source set of design guidelines for creating data visualizations that tell stories,
and a component library that implements them, built for Vue applications.

Design guidelines

Chart selection, chart do's and don'ts, anatomy and spacing, and more. We explain our choices and show examples.

Find the right chart

Vue components

Guided by design guidelines, our components are built with Typescript, for Vue, on top of D3.js. Seamless integration and great performance!

See how to install Lume

Our principles

We aim for accuracy, and consider complexity

We visualize data in a straightforward and truthful way, so end users can trust what they see. We focus on presenting accurate information, but the level of complexity is based on the objective and target audience.

We use beauty as a means, not a goal

We create appealing visualizations that help explain data, so end users can understand what they see. We don't put form over function, but use aesthetics to support and reinforce the shown information.

We care about consistency, but context is key

We apply existing and familiar patterns to data visualizations, so end users can rely on what they know. However, we break with guideline consistency if that leads to improved comprehensiveness. It all depends on the context.

Made with 💚 by Adyen

Lume started as a project for fun, but we soon realized the impact our library could have.
We are proud and excited to share our knowledge on how to tell and build data stories.