Charts - Setup

Install Vue Charts, load the chart styles, and render the first chart with public package imports.

#Installation

Install the Vue Chart package and the chart style package.

npm install @primeui/vue-chart @primeui/chart-style

#License

Chart needs a license key. See Licenses for which licenses cover it and PrimeStore for plans.

#Commercial PrimeUI License

A Commercial PrimeUI license covers both PrimeVue and Chart with one key. If the app uses PrimeVue, pass the key to PrimeVue and nothing else is needed.

import PrimeVue from 'primevue/config';

app.use(PrimeVue, {
    license: 'PRIMEUI-COMMERCIAL-LICENSE-KEY'
});

In Nuxt, set the key in the PrimeVue module options.

export default defineNuxtConfig({
    modules: ['@primevue/nuxt-module'],
    primevue: {
        options: {
            license: 'PRIMEUI-COMMERCIAL-LICENSE-KEY'
        }
    }
});

Without PrimeVue, register the key with registerLicense({ primeui: 'PRIMEUI-COMMERCIAL-LICENSE-KEY' }). The setup is the same as in the next section.

#Chart License

Register a Chart license key under the charts name with @primeui/license-manager. Chart already depends on this package; add it to the app as a direct dependency so the entry file can import it.

npm install @primeui/license-manager

Call registerLicense in the entry file, before the app mounts. In Nuxt, call it from a plugin such as plugins/primeui-license.ts.

import { registerLicense } from '@primeui/license-manager';
import { createApp } from 'vue';
import App from './App.vue';

registerLicense({ charts: 'PRIMEUI-PRO-CHARTS-LICENSE-KEY' });

createApp(App).mount('#app');

If the app also uses PrimeVue with its own PrimeUI license key, pass both keys in the same call and leave license out of the PrimeVue options. Each registerLicense call replaces the previous one, so a key passed to PrimeVue separately can drop the Chart key.

registerLicense({
    primeui: 'PRIMEUI-LICENSE-KEY',
    charts: 'PRIMEUI-PRO-CHARTS-LICENSE-KEY'
});

#Import

Import only the Chart components the page renders.

import { ChartLegend, ChartLine, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';

#Styles

Load the base structural stylesheet once in the app entry. Add a theme file to control series colors and adapt to dark mode.

import '@primeui/chart-style/style.css';
import '@primeui/chart-style/themes/primeone.css'; // or themes/default.css

The base file owns structural styles: legends, tooltips, zoom chrome, and accessibility indicators. The theme file controls series palette and maps chart variables to design tokens.

#Default

Fixed hex values. No dependency on a PrimeUI library.

import '@primeui/chart-style/style.css';
import '@primeui/chart-style/themes/default.css';

#PrimeOne

Use with a PrimeUI library: primeone.css reads PrimeUI design tokens (--p-*), so a PrimeUI preset must be installed and configured for chart colors to resolve. Series colors inherit the active preset and adapt for dark mode automatically. For a setup with no PrimeUI dependency, use default.css instead.

import '@primeui/chart-style/style.css';
import '@primeui/chart-style/themes/primeone.css';

Use Theming for the complete CSS variable, color-mode, and style-class reference.

#Canvas

The stylesheet covers SVG charts. ChartCanvas draws series colors into the bitmap instead of reading CSS, so it takes a theme object through the theme prop. The library exports defaultLightTheme and defaultDarkTheme as a base, and Theming covers the reactive recipe for swapping them on dark-mode toggle.

#Usage

Wrap a series component in ChartSvg and add features as siblings. Each child component hooks into the root on mount. Adding ChartLegend renders a legend and reserves space for it; removing it removes the legend entirely.

<template>
    <ChartSvg :height="400">
        <ChartLine :data="data" category-x-field="month" value-y-field="revenue" />
        <ChartXAxis />
        <ChartYAxis />
        <ChartLegend />
        <ChartTooltip />
    </ChartSvg>
</template>
Loading Demo...

#Quickstarts

Explore the runnable projects in the Charts examples repository. Each quickstart includes bar, line, and pie charts using the SVG renderer and PrimeOne theme.

  • Vite - Vue and Vite with the PrimeOne theme.
  • Nuxt - Nuxt with the PrimeOne theme.

#Next Steps