Chart design across Vue, Nuxt and Angular
What can stay consistent when chart components move between frontend frameworks, and what needs to fit each ecosystem.
Nuxt & Vue
Why I built Nuxt Charts
The practical problem behind Nuxt Charts, and how a chart library grew into reusable blocks and dashboard templates.
Nuxt Charts began inside another project. I was building Nuxt Error, an error dashboard for Nuxt applications, and needed charts that were informative and looked right in the interface.
I liked the polished visualization work I saw in the React ecosystem. Working in Vue and Nuxt, I wanted an equally straightforward way to get to a finished result.
That need became Nuxt Charts. I’m Dennis Adriaansen — also known as Dennis Adriaans in the Nuxt community — and this is one of the projects that best captures how I like to build.
The chart is only part of the work
A dashboard needs more than a line on a screen. It needs a clear label, a sensible scale, useful formatting and a layout that makes the data’s context visible.
Consider a chart of completed jobs. A line can show the trend, but a reader still needs to know the time window and whether the values are totals or rates. A tooltip cannot do all that work for the page.
My aim is to make the ordinary parts of that interface easier to assemble, so a developer can spend more time on what the application needs to communicate.
Defaults should get you started
Nuxt Charts connects Vue chart components, built around Unovis, to a Nuxt-focused experience. The work now also includes reusable blocks and dashboard templates.
A useful default gives a developer something coherent to begin with. Customization lets it fit the product: color, spacing, number formatting and the relationship between a chart and the rest of a screen.
Those two needs belong together. A component should be quick to use without forcing every application to look identical.
From one need to a reusable piece
The original problem was specific to one dashboard. The reusable part was the path from typed data to a readable chart.
That is the pattern I keep looking for in my projects: solve a real problem, identify the repeated work and make that piece easier to use again.
For the current examples and documentation, visit Nuxt Charts. For a longer view of the project, see the Nuxt Charts project page.