DEV Community: Dennis Adriaansen

Why I'm Building Angular Charts

Dennis Adriaansen — Wed, 04 Mar 2026 12:17:39 +0000

React has Tremor; Vue developers have Nuxt Charts, and now, the Angular community finally has a dedicated, modern data visualization library: Angular Charts (angular-chrts).

Hi, I’m Dennis Adriaansen. After seeing the incredible reception and widespread adoption of my previous project, Nuxt Charts, I want to share that same success and developer experience with the Angular community.

Built on a s trong foundation of Unovis and optimized for Angular, Angular Charts is a high-performance, Signals-powered visualization library designed for the modern web.

Why Choose Angular Charts?

🚀 Signals-Powered Reactivity: Built with Angular's modern reactivity model in mind, ensuring fine-grained updates and optimal performance.
🎨 Beautiful by Default: Delivers a polished, production-ready UI instantly, eliminating the need for heavy custom styling.
📊 Versatile Visualization: Comprehensive support for Bar, Line, Area, Donut, Bubble, and Gantt charts to cover all your dashboard needs.
🛠 Native Angular Feel: Features declarative components, OnPush change detection readiness, and CSS-variable driven themes that feel right at home in an Angular codebase.

See the components in action on our official website: angularcharts.com

Quick Start Guide: Implementing Angular Charts

Getting started with Angular Charts is incredibly straightforward. Here is how you can render your first chart in under a minute.

1. Install the Packages

Use your preferred package manager to install the core library alongside its Unovis dependencies:

pnpm add angular-chrts @unovis/angular @unovis/ts

2. Implement in Your Component

Because Angular Charts is built for modern Angular, it fully supports standalone components.

import { Component } from '@angular/core';
import { BarChartComponent } from 'angular-chrts';

@Component({
  standalone: true,
  imports: [BarChartComponent],
  template: `
    <ngx-bar-chart 
      [data]="chartData" 
      [categories]="categories" 
      xLabel="Month" 
      yLabel="Revenue ($)" 
    />`
})
export class AppComponent {
  chartData = [
    { month: 'Jan', revenue: 4500 }, 
    { month: 'Feb', revenue: 5200 }
  ];
  categories = { 
    revenue: { label: 'Revenue', color: '#3b82f6' } 
  };
}

Join the Angular Charts Community

We’re moving fast to build the ultimate charting standard that the Angular ecosystem deserves. Whether you are building internal admin panels, SaaS dashboards, or public-facing data applications, Angular Charts is designed to accelerate your workflow.

Stay tuned for upcoming feature releases, early access to premium components, and open-source contribution opportunities. Let’s build something beautiful together.

Official Resources & References:

🌐 Website: angularcharts.com
📚 Documentation: angularcharts.com/docs
⚙️ Powered by: Unovis Data Visualization
🎨 Optimized for: Angular Material

We’re moving fast. Stay tuned for updates, early access, and contribution opportunities. Let’s build the charting standard Angular deserves, together.

Resources: Website | Documentation

Migrate from NuxtHub to Cloudflare directly

Dennis Adriaansen — Thu, 27 Nov 2025 13:37:11 +0000

Ok, so I just switched nuxtcharts.com from NuxtHub to Cloudflare directly.

I created a new repo using the pnpm create command shown on the CF page to compare the source files with my existing repository. https://developers.cloudflare.com/pages/framework-guides/deploy-a-nuxt-site/

✅ What I Did:

wrangler.jsonc
worker-configuration.d.ts (not that important if you just want it to work for now)
Removed everything NuxtHub related.
Installed Nuxt Content manually, since it was shipped with the NuxtHub module.
Changed my useDB composable to use the Cloudflare binding directly.

I'm currently testing if everything is working fine.

Please let me know if you have suggestions or recommendations.

Let me share some more detailed information.

My new useDB() composable:

//server/utils/database.ts
// old
// export function useDB() {
//   return drizzle(hubDatabase(), { schema })
// }

// new
import { drizzle } from 'drizzle-orm/d1'
import * as schema from '../database/schema'

export const tables = schema

export function useDB() {
  const event = useEvent()
  const d1 = event.context.cloudflare?.env?.DB

  if (!d1) {
    throw new Error('❌ D1 binding "DB" not found. 
Are you running via `npm run dev` with nitro-cloudflare-dev
or `wrangler pages dev`?')
  }

  // 3. Return Drizzle instance initialized with D1 binding
  return drizzle(d1, { schema })
}

//nuxt.config.ts
nitro: {
  preset: 'cloudflare-pages',
  experimental: {
    asyncContext: true
  },
  cloudflare: {
    deployConfig: true,
    nodeCompat: true
  }
}

/**
 * wrangler.jsonc
 * For more details on how to configure Wrangler, refer to:
 * https://developers.cloudflare.com/workers/wrangler/configuration/
 */
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "nuxt-charts-site",
  "compatibility_date": "2025-11-27",
  "pages_build_output_dir": "./dist",
  "observability": {
    "enabled": true,
  },
  /**
   * R2 Buckets
   * https://developers.cloudflare.com/r2/api/workers/workers-api-reference/
   */
  "r2_buckets": [
    {
      "binding": "BLOB",
      "bucket_name": "your-r2-bucket-name",
    },
  ],
  /**
   * D1 Databases
   * https://developers.cloudflare.com/d1/
   */
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "your-database-name",
      "database_id": "xx", // find it in CF Dashboard /workers/d1 and copy binding from dropdown options for your database
    },
  ],
}

Finally, run: npm run build && wrangler pages deploy.

This will ask some questions that will help you deploy your application.

You can find all deployments in the CF Workers & Pages dashboard.

Again, I'm still testing, but I'm optimistic this is the way to go.

Why I'm Building Nuxt Charts

Dennis Adriaansen — Fri, 18 Apr 2025 13:49:58 +0000

If you've spent time in both the React and Vue ecosystems, especially when building data-intensive applications, you might have noticed that the React world seems spoiled for choice when it comes to sleek, modern, and easy-to-integrate charting libraries.

As a developer primarily working with Vue and Nuxt, I feel this gap is much larger than it should be. We need more sleek chart designs and other ways to visualize data effectively. Think of Tremor Labs; we all want to use it, but we can't.

To create more options that combine great aesthetics with a smooth developer experience, I've created Nuxt Charts, a wrapper around vue-chrts—as a way to create beautiful charts in seconds.

Nuxt Charts:

📊 Multiple types: Line, Bar, Area, Donut
🎨 Easily customizable
💡 Simple, intuitive API
💚 Built for the Vue ecosystem

On top of Unovis, optimized for Nuxt UI.

Check the docs and examples

It began with another project I was creating: Nuxt Error, an error logging dashboard specifically for Nuxt applications. As I designed the interface for Nuxt Error, the need for clear, informative, and visually appealing charts.

It became clear that I couldn't find any solutions other than React alternatives, which looked beautiful. But again, I'm 100% locked into the Vue/Nuxt ecosystem, so I had to figure something out.

Looking at the available options, and drawing inspiration from the richer selection often seen in React projects, I realized there was an opportunity. Why not build a charting package myself?

The focus of Nuxt Charts

Nuxt Charts is envisioned as a Nuxt package dedicated to helping developers build beautiful charts and dashboards with minimal friction, with the following core beliefs:

Aesthetics: Provide modern, visually appealing chart components out-of-the-box.
Developer Experience: Ensure seamless integration with Nuxt leveraging its features for an intuitive setup and usage.
Customization: Offer sensible defaults but allow for easy customization to match diverse application designs.
Focus: Concentrate specifically on being the best charting solution for the Nuxt ecosystem, rather than trying to be a generic, framework-agnostic library.

Check the docs and examples

What validated this idea and gave the project great momentum was the reaction from the community. After the initial announcement, I was pretty surprised and excited to receive such support and encouragement from major figures within the Vue and Nuxt ecosystems.

Having people like Sébastien Chopin (creator of Nuxt), Evan You (creator of Vue), and many other fantastic developers express their enthusiasm and support is great motivation.

Nuxt Charts is currently under active development. The focus is on building a solid foundation, selecting the right underlying charting technology (or developing it), and ensuring the API feels natural, cosistent and powerful for Nuxt developers.

How to get started?

1. Install the module
pnpm add nuxt-charts

2. Add module to config
export default defineNuxtConfig({ modules: ["nuxt-charts"] });

Note If you're using pnpm, ensure that you set shamefully-hoist=true in your .npmrc file.
Check the docs and examples

Nuxt Templates

I created a Nuxt Dashboard template using these charts, which gives you direct access to pre-built admin pages featuring many chart variants. These Nuxt templates will decrease time-to-production for any developer and provide instant access to clean UI components.

Get Involved

This project aims to fill a perceived gap, driven by a personal need encountered while building other tools and validated by the broader community. If you're a Nuxt developer who has wished for better, easier, or more beautiful charting options, I hope Nuxt Charts will eventually be the solution you're looking for.

Keep an eye out for updates! As development progresses, there will be opportunities for feedback, contributions, and early testing. The enthusiasm from the community has been fantastic, and I'm excited to build this together.