Chart design across Vue, Nuxt and Angular

I shared an update about bringing the charting work to Angular, powered by Unovis. Alongside Nuxt Charts and vue-chrts, that work raises a useful design question: which parts of a chart belong to the framework, and which belong to the data?

This article develops that question from the public update.

The reader’s task stays familiar

Whether the application is written in Vue, Nuxt or Angular, a chart’s reader still needs to understand a trend, compare categories or inspect a proportion.

The same questions are worth asking in each implementation. Are the labels clear? Are the units visible? Is a comparison meaningful? Can the chart fit the space available?

The framework does not answer those design questions.

The component API should fit the framework

The way a developer passes data, reacts to changes and configures a component does depend on the framework.

Trying to make every wrapper look identical can create an API that feels unfamiliar everywhere. A better boundary keeps the visualization concepts consistent while letting each integration use its ecosystem’s conventions.

For a bar chart, the common ideas might be a dataset, categories, labels and formatting. The component’s inputs and update behavior should still feel natural in its application.

Shared foundations reduce duplicated work

Unovis is the visualization foundation used in the chart projects. A shared foundation gives the work a common place to build from.

That does not make each package interchangeable. Integrations still have their own setup, documentation and compatibility considerations.

The repository is the right place to verify what a particular package currently supports.

Choose the level of abstraction you need

A finished chart component helps when a familiar chart type is enough. Lower-level primitives help when the visualization itself is unusual.

That is part of the distinction between the component work in vue-chrts and the exploration in visx-vue. Both can be useful, but they leave different amounts of work to the developer.

You can find the packages on the open-source charts project page. For the Nuxt-focused experience, start with Nuxt Charts.