[{"data":1,"prerenderedAt":168},["ShallowReactive",2],{"article-\u002Fblog\u002Fchart-design-across-vue-nuxt-and-angular":3,"related-\u002Fblog\u002Fchart-design-across-vue-nuxt-and-angular":31,"mdc-kw68cl-key":49},{"slug":4,"title":5,"description":6,"body":7,"category":8,"sources":9,"date":19,"tags":20,"language":27,"draft":28,"project":29,"path":30},"chart-design-across-vue-nuxt-and-angular","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.","\nI 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?\n\nThis article develops that question from the public update.\n\n## The reader’s task stays familiar\n\nWhether 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.\n\nThe 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?\n\nThe framework does not answer those design questions.\n\n## The component API should fit the framework\n\nThe way a developer passes data, reacts to changes and configures a component does depend on the framework.\n\nTrying 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.\n\nFor 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.\n\n## Shared foundations reduce duplicated work\n\nUnovis is the visualization foundation used in the chart projects. A shared foundation gives the work a common place to build from.\n\nThat does not make each package interchangeable. Integrations still have their own setup, documentation and compatibility considerations.\n\nThe repository is the right place to verify what a particular package currently supports.\n\n## Choose the level of abstraction you need\n\nA finished chart component helps when a familiar chart type is enough. Lower-level primitives help when the visualization itself is unusual.\n\nThat 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.\n\nYou can find the packages on [the open-source charts project page](\u002Fprojects\u002Fopen-source-charts). For the Nuxt-focused experience, start with [Nuxt Charts](\u002Fprojects\u002Fnuxt-charts).\n","Nuxt & Vue",[10,13,16],{"label":11,"url":12},"My Angular chart announcement on X","https:\u002F\u002Fx.com\u002FDennisAdriaans\u002Fstatus\u002F2018720917036114092",{"label":14,"url":15},"vue-chrts repository","https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fvue-chrts",{"label":17,"url":18},"angular-chrts repository","https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fangular-chrts","2026-10-12",[21,22,23,24,25,26],"Vue","Nuxt","Angular","Unovis","charts","open source","en",false,"open-source-charts","\u002Fblog\u002Fchart-design-across-vue-nuxt-and-angular",[32],{"slug":33,"title":34,"description":35,"body":36,"category":8,"sources":37,"date":19,"tags":44,"language":27,"draft":28,"project":47,"path":48},"why-i-built-nuxt-charts","Why I built Nuxt Charts","The practical problem behind Nuxt Charts, and how a chart library grew into reusable blocks and dashboard templates.","\nNuxt 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.\n\nI 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.\n\nThat 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.\n\n## The chart is only part of the work\n\nA 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.\n\nConsider 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.\n\nMy 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.\n\n## Defaults should get you started\n\nNuxt Charts connects Vue chart components, built around Unovis, to a Nuxt-focused experience. The work now also includes reusable blocks and dashboard templates.\n\nA 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.\n\nThose two needs belong together. A component should be quick to use without forcing every application to look identical.\n\n## From one need to a reusable piece\n\nThe original problem was specific to one dashboard. The reusable part was the path from typed data to a readable chart.\n\nThat 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.\n\nFor the current examples and documentation, visit [Nuxt Charts](https:\u002F\u002Fnuxtcharts.com). For a longer view of the project, see [the Nuxt Charts project page](\u002Fprojects\u002Fnuxt-charts).\n",[38,41],{"label":39,"url":40},"My original article on DEV","https:\u002F\u002Fdev.to\u002Fdennisadriaans\u002Fwhy-im-building-nuxt-charts-4dlj",{"label":42,"url":43},"Nuxt Charts — current library and examples","https:\u002F\u002Fnuxtcharts.com",[45,21,24,46],"Nuxt Charts","developer experience","nuxt-charts","\u002Fblog\u002Fwhy-i-built-nuxt-charts",{"data":50,"body":51},{},{"type":52,"children":53},"root",[54,62,67,74,79,84,89,95,100,105,110,116,121,126,131,137,142,147],{"type":55,"tag":56,"props":57,"children":58},"element","p",{},[59],{"type":60,"value":61},"text","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?",{"type":55,"tag":56,"props":63,"children":64},{},[65],{"type":60,"value":66},"This article develops that question from the public update.",{"type":55,"tag":68,"props":69,"children":71},"h2",{"id":70},"the-readers-task-stays-familiar",[72],{"type":60,"value":73},"The reader’s task stays familiar",{"type":55,"tag":56,"props":75,"children":76},{},[77],{"type":60,"value":78},"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.",{"type":55,"tag":56,"props":80,"children":81},{},[82],{"type":60,"value":83},"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?",{"type":55,"tag":56,"props":85,"children":86},{},[87],{"type":60,"value":88},"The framework does not answer those design questions.",{"type":55,"tag":68,"props":90,"children":92},{"id":91},"the-component-api-should-fit-the-framework",[93],{"type":60,"value":94},"The component API should fit the framework",{"type":55,"tag":56,"props":96,"children":97},{},[98],{"type":60,"value":99},"The way a developer passes data, reacts to changes and configures a component does depend on the framework.",{"type":55,"tag":56,"props":101,"children":102},{},[103],{"type":60,"value":104},"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.",{"type":55,"tag":56,"props":106,"children":107},{},[108],{"type":60,"value":109},"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.",{"type":55,"tag":68,"props":111,"children":113},{"id":112},"shared-foundations-reduce-duplicated-work",[114],{"type":60,"value":115},"Shared foundations reduce duplicated work",{"type":55,"tag":56,"props":117,"children":118},{},[119],{"type":60,"value":120},"Unovis is the visualization foundation used in the chart projects. A shared foundation gives the work a common place to build from.",{"type":55,"tag":56,"props":122,"children":123},{},[124],{"type":60,"value":125},"That does not make each package interchangeable. Integrations still have their own setup, documentation and compatibility considerations.",{"type":55,"tag":56,"props":127,"children":128},{},[129],{"type":60,"value":130},"The repository is the right place to verify what a particular package currently supports.",{"type":55,"tag":68,"props":132,"children":134},{"id":133},"choose-the-level-of-abstraction-you-need",[135],{"type":60,"value":136},"Choose the level of abstraction you need",{"type":55,"tag":56,"props":138,"children":139},{},[140],{"type":60,"value":141},"A finished chart component helps when a familiar chart type is enough. Lower-level primitives help when the visualization itself is unusual.",{"type":55,"tag":56,"props":143,"children":144},{},[145],{"type":60,"value":146},"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.",{"type":55,"tag":56,"props":148,"children":149},{},[150,152,159,161,166],{"type":60,"value":151},"You can find the packages on ",{"type":55,"tag":153,"props":154,"children":156},"a",{"href":155},"\u002Fprojects\u002Fopen-source-charts",[157],{"type":60,"value":158},"the open-source charts project page",{"type":60,"value":160},". For the Nuxt-focused experience, start with ",{"type":55,"tag":153,"props":162,"children":164},{"href":163},"\u002Fprojects\u002Fnuxt-charts",[165],{"type":60,"value":45},{"type":60,"value":167},".",1794481660968]