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

#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