syncfusion-vue-3d-circular-chart

Implementing Syncfusion Vue 3D Circular Chart

The Syncfusion Vue 3D Circular Chart is a powerful component for visualizing hierarchical and proportional data through interactive pie and donut charts with 3D perspective effects. It supports customizable data labels, legends, tooltips, and advanced interactive features perfect for reports, dashboards, and data analysis applications.

When to Use This Skill

• Pie Chart Visualization: When you need to display parts of a whole using pie charts
• Donut Charts: For ring-style visualizations with optional center content
• Data Labels: Adding contextual information directly on chart segments
• Interactive Elements: Tooltips, click handlers, and selection behaviors
• Chart Customization: Legends, colors, sizes, and 3D rotation effects
• Data Binding: Dynamic data sources with Vue reactivity
• Advanced Features: Empty point handling, animations, export to PDF/PNG

Documentation & Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Module registration and Vue 2 vs Vue 3 syntax
• Basic pie chart creation
• Your first 3D circular chart

Pie & Donut Charts

📄 Read: references/pie-and-donut.md

• Pie chart rendering and configuration
• Donut charts with inner radius
• Radius customization and dynamic radii
• Color and text mapping

Data Labels & Formatting

📄 Read: references/data-labels.md

• Enabling and positioning data labels
• Text formatting and templates
• Connector lines and styling
• Custom formatting with events

Legend & Navigation

📄 Read: references/legend-and-navigation.md

• Legend visibility and positioning
• Legend alignment and wrapping
• Click events and selection
• Legend customization

Tooltips & Interactivity

📄 Read: references/tooltips-and-interactivity.md

• Tooltip enabling and customization
• Custom tooltip templates
• Point selection and events
• Point render and customization

Advanced Features

📄 Read: references/advanced-features.md

• Empty point handling
• 3D view rotation (tilt angle)
• Animation configuration
• Print and export functionality

Quick Start

Basic Pie Chart (Vue 2)

<template>
  <div id="app">
    <ejs-circularchart3d id="container" title="Sales Data">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource="seriesData" xName="x" yName="y"></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>

<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D } from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-circularchart3d': CircularChart3DComponent,
    'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
    'e-circularchart3d-series': CircularChart3DSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Product A', y: 35 },
        { x: 'Product B', y: 28 },
        { x: 'Product C', y: 34 },
        { x: 'Product D', y: 32 }
      ]
    };
  },
  provide: {
    circularchart3d: [PieSeries3D]
  }
};
</script>

<style>
#container {
  height: 350px;
}
</style>

Basic Pie Chart (Vue 3)

<template>
  <div id="app">
    <ejs-circularchart3d id="container" title="Sales Data">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource="seriesData" xName="x" yName="y"></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>

<script setup>
import { provide } from 'vue';
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D } from '@syncfusion/ej2-vue-charts';

const seriesData = [
  { x: 'Product A', y: 35 },
  { x: 'Product B', y: 28 },
  { x: 'Product C', y: 34 },
  { x: 'Product D', y: 32 }
];

provide('circularchart3d', [PieSeries3D]);
</script>

<style>
#container {
  height: 350px;
}
</style>

Donut Chart with Labels

<template>
  <div id="app">
    <ejs-circularchart3d id="container" title="Market Share">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          :dataSource="seriesData" 
          xName="x" 
          yName="y" 
          innerRadius="40%"
          :dataLabel="{ visible: true, position: 'Outside' }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>

Common Patterns

Pattern 1: Enable Legend and Tooltip

// In data() or setup
const legendSettings = {
  visible: true,
  position: 'Right'
};

const tooltip = {
  enable: true,
  format: '${point.x}: ${point.y}%'
};

// Register modules
provide('circularchart3d', [PieSeries3D, CircularChartLegend3D, CircularChartTooltip3D]);

Pattern 2: Dynamic Data with Reactivity

// Vue 2
data() {
  return {
    seriesData: [
      { x: 'Q1', y: 45, fill: '#498fff' },
      { x: 'Q2', y: 52, fill: '#ffa060' }
    ]
  };
}

// Update data
this.seriesData.push({ x: 'Q3', y: 38, fill: '#ff68b6' });

Pattern 3: Point Customization Event

pointRender(args) {
  // Customize individual points
  if (args.point.x === 'Q1') {
    args.fill = '#ff0000'; // Highlight specific segment
  }
}

// Provide event handler to chart
<ejs-circularchart3d :pointRender="pointRender">

Pattern 4: Format Data Labels

const dataLabel = {
  visible: true,
  name: 'text',
  format: 'n2', // 2 decimal places
  position: 'Inside'
};

Key Modules & Series

Essential Module: PieSeries3D

import { PieSeries3D } from '@syncfusion/ej2-vue-charts';
provide('circularchart3d', [PieSeries3D]);

Additional Modules (As Needed)

Module	Purpose
CircularChartDataLabel3D	Enable data labels
CircularChartLegend3D	Display legend
CircularChartTooltip3D	Show tooltips on hover

Core Props Quick Reference

Property	Type	Purpose
dataSource	Array	Data points for the chart
xName	String	Data field for x values (category)
yName	String	Data field for y values (numeric)
radius	String	Pie radius (e.g., '80%')
innerRadius	String	Donut hole size (e.g., '40%')
dataLabel	Object	Label configuration
tilt	Number	3D rotation angle (-90 to 90)
legendSettings	Object	Legend configuration
tooltip	Object	Tooltip configuration