Chart — usage examples

Chart ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { Chart } from '@rozie-ui/chartjs-react';

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

export function Demo() {
  return <Chart type="bar" data={data} height={280} />;
}

vue

<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>

svelte

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

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

<Chart type="bar" {data} height={280} />

import { Component } from '@angular/core';
import { Chart } from '@rozie-ui/chartjs-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Chart],
  template: `<Chart type="bar" [data]="data" [height]="280" />`,
})
export class DemoComponent {
  data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{ label: 'Revenue', data: [12, 19, 8, 15] }],
  };
}

tsx

import { Chart } from '@rozie-ui/chartjs-solid';

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

export function Demo() {
  return <Chart type="bar" data={data} height={280} />;
}

import '@rozie-ui/chartjs-lit';

// <rozie-chart> is a custom element. Bind `data`/`type` as properties.
const el = document.querySelector('rozie-chart');
el.type = 'bar';
el.data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr'],
  datasets: [{ label: 'Revenue', data: [12, 19, 8, 15] }],
};
el.addEventListener('click', (e) => console.log(e.detail.elements));

Imperative handle

Beyond props and events, Chart exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Chart, type ChartHandle } from '@rozie-ui/chartjs-react';

const chart = useRef<ChartHandle>(null);
// <Chart ref={chart} ... />
chart.current?.updateChart();
const png = chart.current?.toBase64Image();

vue

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

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

svelte

<script>
  let chart;                 // component instance via bind:this
</script>

<Chart bind:this={chart} />
<button onclick={() => chart.updateChart()}>Update</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Chart) chart!: Chart;  // or the viewChild() signal
  refresh() { this.chart.updateChart(); }
  png() { return this.chart.toBase64Image(); }
}

tsx

import { Chart, type ChartHandle } from '@rozie-ui/chartjs-solid';

let handle: ChartHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Chart ref={(h) => (handle = h)} />;
handle?.updateChart();
const png = handle?.toBase64Image();

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-chart');
el.updateChart();
const png = el.toBase64Image();

Chart — usage examples ​

Usage ​

Imperative handle ​

See also ​

Chart — usage examples

Usage

Imperative handle

See also