@rozie-ui/chartjs-vue

@rozie-ui/chartjs-vue

Idiomatic vue Chart — a cross-framework data-visualization component compiled from one Rozie source wrapping Chart.js. The type prop switches the chart kind across the whole Chart.js controller set (line/bar/pie/doughnut/radar/polarArea/scatter/bubble). This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/chartjs-vue

Peer dependencies: the chart.js engine (^4) + vue. Install them alongside this package.

Usage

<script setup lang="ts">
import Chart from '@rozie-ui/chartjs-vue';

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr'],
  datasets: [{ label: 'Revenue', data: [12, 19, 8, 15] }],
};
</script>

<template>
  <Chart type="bar" :data="data" :height="280" />
</template>

Registration & per-type components

Chart.js v3+ is tree-shakable: the generic Chart does not auto-register controllers, so register what you use —

import { Chart, LineController, LineElement, PointElement, LinearScale, CategoryScale } from 'chart.js';
Chart.register(LineController, LineElement, PointElement, LinearScale, CategoryScale);

— or import the kitchen-sink /auto entry (@rozie-ui/chartjs-vue/auto, or import 'chart.js/auto') which registers everything.

Or use a per-type component — each pins its type and registers only its own controller set (so importing one is tree-shakable), with the same props/events/handle as the generic Chart (minus type): Line, Bar, Pie, Doughnut, PolarArea, Radar, Scatter, Bubble.

Props

Events

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const chart = ref();        // template ref
</script>

<template>
  <Chart ref="chart" />
  <button @click="chart.updateChart()">Update</button>
</template>

Slots