PrimeUI Vue Chart

@primeui/vue-chart is the Vue 3 chart component for PrimeUI. It supports bar, line, pie, doughnut, radar, polar area, and scatter chart types.

Install

pnpm add @primeui/vue-chart

Basic Usage

<script setup lang="ts">
import { Chart } from '@primeui/vue-chart';

const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
        {
            label: 'Sales',
            data: [40, 59, 80, 61, 56],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
        }
    ]
};

const options = {
    responsive: true,
    plugins: {
        legend: { position: 'top' }
    }
};
</script>

<template>
    <Chart type="bar" :data="data" :options="options" />
</template>

Chart Types

| Type | Value | | ---------- | ------------- | | Bar | "bar" | | Line | "line" | | Pie | "pie" | | Doughnut | "doughnut" | | Radar | "radar" | | Polar Area | "polarArea" | | Scatter | "scatter" |

Responsive Charts

Charts are responsive by default. Set width and height props to fix the canvas dimensions, or control the container size via CSS.

<template>
    <Chart type="line" :data="data" width="400" height="300" />
</template>

License

Licensed under the PrimeUI Pro License - Copyright (c) PrimeTek Informatics