[{"data":1,"prerenderedAt":149},["ShallowReactive",2],{"project-\u002Fprojects\u002Fopen-source-charts":3,"project-writing-\u002Fprojects\u002Fopen-source-charts":31,"mdc--o9e4zy-key":51},{"slug":4,"title":5,"description":6,"body":7,"category":8,"sources":9,"name":22,"order":23,"status":24,"stack":25,"repository":12,"featured":29,"path":30},"open-source-charts","Open-source charts — a project by Dennis Adriaansen","vue-chrts, angular-chrts and visx-vue: visualization work across the frontend ecosystem.","\n## Charting beyond one framework\n\nNuxt Charts connects to a broader set of visualization projects I work on as Dennis Adriaansen. You can find them under the GitHub account [dennisadriaans](https:\u002F\u002Fgithub.com\u002Fdennisadriaans).\n\n## vue-chrts\n\n[vue-chrts](https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fvue-chrts) is the Vue chart package behind the Nuxt-focused work. It uses Unovis and provides a component-oriented way to build charts in Vue applications.\n\n## angular-chrts\n\n[angular-chrts](https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fangular-chrts) brings chart components to Angular. I shared [a public update about the Angular work](https:\u002F\u002Fx.com\u002FDennisAdriaans\u002Fstatus\u002F2018720917036114092), also built around Unovis.\n\nThe framework changes, but the need for clear defaults, readable charts and understandable APIs stays familiar.\n\n## visx-vue\n\n[visx-vue](https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fvisx-vue) explores expressive, low-level visualization primitives for Vue. It is a different level of abstraction from a ready-made chart component.\n\nThe repository READMEs describe each package’s actual setup and scope. Read [chart design across Vue, Nuxt and Angular](\u002Fblog\u002Fchart-design-across-vue-nuxt-and-angular) for the ideas connecting the work.\n","Vue & Angular",[10,13,16,19],{"label":11,"url":12},"vue-chrts","https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fvue-chrts",{"label":14,"url":15},"angular-chrts","https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fangular-chrts",{"label":17,"url":18},"visx-vue","https:\u002F\u002Fgithub.com\u002Fdennisadriaans\u002Fvisx-vue",{"label":20,"url":21},"My Angular chart announcement on X","https:\u002F\u002Fx.com\u002FDennisAdriaans\u002Fstatus\u002F2018720917036114092","Open-source charts",5,"Open source",[26,27,28],"Vue","Angular","Unovis",false,"\u002Fprojects\u002Fopen-source-charts",[32],{"slug":33,"title":34,"description":35,"body":36,"category":37,"sources":38,"date":44,"tags":45,"language":49,"draft":29,"project":4,"path":50},"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",[39,40,42],{"label":20,"url":21},{"label":41,"url":12},"vue-chrts repository",{"label":43,"url":15},"angular-chrts repository","2026-10-12",[26,46,27,28,47,48],"Nuxt","charts","open source","en","\u002Fblog\u002Fchart-design-across-vue-nuxt-and-angular",{"data":52,"body":53},{},{"type":54,"children":55},"root",[56,65,82,86,96,100,118,123,127,137],{"type":57,"tag":58,"props":59,"children":61},"element","h2",{"id":60},"charting-beyond-one-framework",[62],{"type":63,"value":64},"text","Charting beyond one framework",{"type":57,"tag":66,"props":67,"children":68},"p",{},[69,71,80],{"type":63,"value":70},"Nuxt Charts connects to a broader set of visualization projects I work on as Dennis Adriaansen. You can find them under the GitHub account ",{"type":57,"tag":72,"props":73,"children":77},"a",{"href":74,"rel":75},"https:\u002F\u002Fgithub.com\u002Fdennisadriaans",[76],"nofollow",[78],{"type":63,"value":79},"dennisadriaans",{"type":63,"value":81},".",{"type":57,"tag":58,"props":83,"children":84},{"id":11},[85],{"type":63,"value":11},{"type":57,"tag":66,"props":87,"children":88},{},[89,94],{"type":57,"tag":72,"props":90,"children":92},{"href":12,"rel":91},[76],[93],{"type":63,"value":11},{"type":63,"value":95}," is the Vue chart package behind the Nuxt-focused work. It uses Unovis and provides a component-oriented way to build charts in Vue applications.",{"type":57,"tag":58,"props":97,"children":98},{"id":14},[99],{"type":63,"value":14},{"type":57,"tag":66,"props":101,"children":102},{},[103,108,110,116],{"type":57,"tag":72,"props":104,"children":106},{"href":15,"rel":105},[76],[107],{"type":63,"value":14},{"type":63,"value":109}," brings chart components to Angular. I shared ",{"type":57,"tag":72,"props":111,"children":113},{"href":21,"rel":112},[76],[114],{"type":63,"value":115},"a public update about the Angular work",{"type":63,"value":117},", also built around Unovis.",{"type":57,"tag":66,"props":119,"children":120},{},[121],{"type":63,"value":122},"The framework changes, but the need for clear defaults, readable charts and understandable APIs stays familiar.",{"type":57,"tag":58,"props":124,"children":125},{"id":17},[126],{"type":63,"value":17},{"type":57,"tag":66,"props":128,"children":129},{},[130,135],{"type":57,"tag":72,"props":131,"children":133},{"href":18,"rel":132},[76],[134],{"type":63,"value":17},{"type":63,"value":136}," explores expressive, low-level visualization primitives for Vue. It is a different level of abstraction from a ready-made chart component.",{"type":57,"tag":66,"props":138,"children":139},{},[140,142,147],{"type":63,"value":141},"The repository READMEs describe each package’s actual setup and scope. Read ",{"type":57,"tag":72,"props":143,"children":144},{"href":50},[145],{"type":63,"value":146},"chart design across Vue, Nuxt and Angular",{"type":63,"value":148}," for the ideas connecting the work.",1794481660987]