Installation

Get started with Nuxt Charts.

1. Install dependencies

Use your preferred package manager to install Nuxt Charts:

Terminal
npm install nuxt-charts

pnpm add nuxt-charts
Warning! If you're using pnpm, set shamefully-hoist=true in your .npmrc to avoid the "to-px" error, or install @unovis/ts as a dependency.
Star

2. Add the module to your Nuxt config

nuxt.config.ts
export default defineNuxtConfig({
    modules: ["nuxt-charts"]
})

3. Test installation with the following code

line-chart.vue
<script setup lang="ts">
const data = [
  { month: 'Jan', sales: 100, profit: 50 },
  { month: 'Feb', sales: 120, profit: 55 },
  { month: 'Mar', sales: 180, profit: 80 },
  { month: 'Apr', sales: 110, profit: 40 },
  { month: 'May', sales: 90, profit: 30 },
]

const categories = {
  sales: {
    name: 'Sales',
    color: '#3b82f6',
  },
  profit: {
    name: 'Profit',
    color: '#10b981',
  },
}

const xFormatter = (i: number) => data[i].month
</script>

<template>
  <LineChart
    :data="data"
    :categories="categories"
    :height="300"
    :xFormatter="xFormatter"
    xLabel="Month"
    yLabel="Amount"
  />
</template>
Star

4. Customize CSS variables

Check the Unovis documentation for all options.

/assets/css/main.css
:root {
  --vis-color0: oklch(0.72 0.192 149.58) !important;
  --vis-color1: oklch(0.63 0.1963 157.86) !important;

  --tooltip-label-color: rgba(255, 255, 255, 0.5) !important;
  --tooltip-value-color: rgba(255, 255, 255, 1) !important;

  --vis-axis-grid-color: rgba(255, 255, 255, 0.1) !important;
  
  --vis-tooltip-background-color: #121212 !important;
  --vis-tooltip-border-color: none !important;

  --tooltip-label-color: rgba(255, 255, 255, 0.5);
  --tooltip-value-color: rgba(255, 255, 255, 1);

  --vis-tooltip-text-color: rgba(255, 255, 255, 0.5) !important;
  --vis-axis-tick-label-color: rgba(255, 255, 255, 0.5) !important;
  --vis-legend-label-color: rgba(255, 255, 255, 0.75) !important;

  --vis-axis-label-color: rgba(255, 255, 255, 0.5) !important;
  --vis-legend-label-color: rgba(255, 255, 255, 0.5) !important;
}
Star

CLI

How to install and use the Nuxt Charts CLI for chart management.