Note

This documentation describes the Chart Vue component for native UI views for Xml templates see chart.

Chart

Renders a chart.js chart with annotation plugin support. Lazily imports chart.js/auto and re-creates the chart when type, data, or options change.

Import

import { Chart } from '@neos/design-system'

Props

Prop	Type	Default	Description
type	ChartType	—	Required. Chart.js chart type: 'bar', 'line', 'pie', 'doughnut', 'radar', 'polarArea', 'bubble', 'scatter'
data	ChartData	—	Required. Chart.js data object with labels and datasets
options	ChartOptions	{}	Chart.js options object

Notes

• Relies on the full chart.js/auto bundle.
• Supports the chartjs-plugin-annotation plugin for drawing annotations on charts.
• The chart is destroyed and re-created reactively when type, data, or options change.

Usage Examples

Bar chart

<Chart
  type="bar"
  :data="{
    labels: ['January', 'February', 'March'],
    datasets: [{ label: 'Sales', data: [120, 200, 150], backgroundColor: '#42A5F5' }]
  }"
/>

Line chart with options

<Chart
  type="line"
  :data="salesData"
  :options="{
    responsive: true,
    scales: {
      y: { beginAtZero: true }
    }
  }"
/>

Pie chart

<Chart
  type="pie"
  :data="{
    labels: ['Active', 'Inactive', 'Pending'],
    datasets: [{
      data: [60, 25, 15],
      backgroundColor: ['#4CAF50', '#F44336', '#FF9800']
    }]
  }"
/>

Dynamic data from ViewModel

<Chart type="line" :data="viewModel.current.chartData" />