Building A Donut Chart With Vue And Svg

Why Build Custom Donut Charts?

Custom donut chart implementations offer several compelling benefits for web developers and designers. First and foremost, they provide complete control over visual appearance and behavior, allowing charts to match exact design specifications without fighting library constraints.

Key advantages of custom implementations:

• Performance: Minimal bundle size compared to charting libraries
• Customization: Complete control over appearance and behavior
• No dependencies: Eliminate external library overhead
• Scalability: Resolution-independent SVG graphics

From a performance perspective, custom SVG charts eliminate the overhead associated with comprehensive charting libraries. A well-implemented Vue.js donut chart component might require only a few kilobytes of JavaScript, compared to the tens or hundreds of kilobytes that general-purpose charting libraries typically contribute to bundle sizes. This difference becomes significant in performance-critical applications, particularly those targeting mobile devices or operating under strict bandwidth constraints.

Additionally, building custom charts deepens understanding of underlying technologies, enabling developers to debug issues more effectively and extend functionality as requirements evolve. The knowledge gained from implementing SVG charts transfers directly to other visualization challenges and helps developers make informed decisions about when to use pre-built solutions versus custom implementations. For teams focused on web application performance optimization, mastering these fundamental techniques provides a strong foundation for creating efficient, responsive user interfaces.

The SVG Foundation

Understanding SVG Circle Elements

SVG provides a powerful foundation for creating vector graphics directly within web pages. The <circle> element serves as the fundamental building block for donut charts, offering declarative syntax for defining circular shapes with precise control over position and size. Understanding how SVG coordinates and dimensions work is essential for accurate chart implementation.

The SVG coordinate system places the origin (0, 0) at the top-left corner of the viewport, with positive x values extending rightward and positive y values extending downward. For circular elements, the cx and cy attributes specify the center coordinates, while the r attribute defines the radius. A circle centered at (100, 100) with a radius of 80 would be declared as <circle cx="100" cy="100" r="80" />.

For donut charts specifically, the stroke--the outline of the circle--becomes the primary visual element. The stroke width determines the thickness of the donut ring, while the fill color remains transparent, allowing the stroke color to define the visible portion. This distinction between stroke and fill is fundamental to understanding how SVG creates donut chart visualizations.

Key SVG Attributes for Donut Charts

Several SVG attributes play critical roles in donut chart implementation:

• stroke-width: Controls the thickness of the circular line
• stroke: Specifies the color of the circle's outline
• stroke-linecap: Determines how the ends of open paths are rendered
• stroke-dasharray & stroke-dashoffset: Enable partial circle creation

These attributes work together to create the visual representation of data within the chart. The stroke-dasharray and stroke-dashoffset attributes are particularly important, as they enable the creation of partial circles that represent specific proportions of the total, which is the foundation of the donut chart technique.

For additional details on SVG circle elements and their attributes, refer to the MDN Web Docs on SVG.

The Stroke-Dasharray Technique

How Stroke-Dasharray Works

The stroke-dasharray attribute controls the pattern of dashes and gaps used to draw the stroke. When applied to a circle, it creates alternating visible and invisible segments along the circumference. The attribute accepts a comma-separated or space-separated list of values that define the lengths of dashes and gaps in alternating order.

For example, stroke-dasharray="10, 5" creates a pattern of 10-unit dashes followed by 5-unit gaps, repeating throughout the stroke's length. This pattern determines which portions of the circle's perimeter are rendered and which remain transparent, effectively "cutting out" sections of the stroke.

For donut charts, the technique involves calculating the circumference of the circle and using stroke-dasharray to display only the desired portion. A circle with a circumference of 100 units displaying 75% of its total would use stroke-dasharray="75, 25", where 75 units represent the visible segment and 25 units represent the hidden portion.

Calculating Circle Circumference

The circumference of a circle follows a fundamental mathematical relationship with the radius. The formula C = 2πr, where C represents circumference and r represents radius, provides the foundation for all stroke-dasharray calculations in donut chart implementation.

For a circle with a radius of 80 units, the circumference calculates as follows: C = 2 × π × 80 ≈ 502.65 units. When implementing charts programmatically, using Math.PI * 2 * radius ensures accurate circumference calculation in JavaScript.

Controlling Arc Length with Stroke-Dashoffset

While stroke-dasharray defines the pattern of dashes and gaps, stroke-dashoffset controls where along the circumference the pattern begins. This attribute is essential for positioning the visible segment at the desired starting point, enabling rotation of the arc to any angle around the circle.

For donut charts displaying multiple segments, each segment requires careful calculation of both dasharray and offset values. The offset for each subsequent segment equals the sum of all previous segments' lengths, ensuring segments connect end-to-end around the circle without gaps or overlaps. This calculation becomes more complex with multiple segments but follows the same fundamental principle of positioning arcs at precise locations along the circumference.

For complete documentation on SVG stroke attributes, consult the W3Schools SVG Stroking reference.

Building the Vue.js Component

Component Structure

A well-structured Vue.js donut chart component separates concerns effectively, with template markup defining the SVG structure, script logic handling calculations and state management, and styles controlling visual presentation. The template typically contains a root <svg> element with nested <circle> elements for each data segment.

The template uses Vue's v-for directive to render multiple circle elements based on the segments data. Each segment receives computed properties for dasharray and dashoffset values derived from the component's props and data. The :key attribute ensures proper rendering performance and helps Vue track element identity during updates.

The viewBox attribute defines the SVG coordinate system, enabling the chart to scale proportionally within its container. A viewBox of "0 0 200 200" creates a 200×200 coordinate space where calculations can assume consistent dimensions regardless of the displayed size.

Handling Single and Multiple Segments

Donut charts display either a single percentage value (progress completion) or multiple proportional segments (budget allocation). The component implementation handles both scenarios through consistent calculation logic:

• Single segment: Displays specified percentage of circumference
• Multiple segments: Cumulative offset calculation positions each segment correctly

The first segment begins at the standard starting position, while subsequent segments begin where the previous segment ends, creating contiguous segments wrapping around the circle without gaps. This approach ensures each segment receives appropriate positioning regardless of the number of segments, supporting charts with two, three, or many more categories while maintaining consistent visual behavior.

Vue's reactivity system naturally supports donut chart implementation, with computed properties deriving dash array and offset values from raw data. The component accepts data through props, allowing parent components to pass segment values and colors while maintaining proper data flow. This reactive approach is particularly valuable for real-time dashboard applications where data updates frequently.

For additional Vue component patterns and examples, explore the vue-svg-charts GitHub repository, which demonstrates lightweight Vue components for drawing pure SVG charts without external dependencies.

Creating Interactive Animations

CSS-Based Transitions

CSS transitions provide the simplest approach to animating donut chart segments, offering smooth visual updates when data changes. By applying transition properties to the stroke-related attributes, charts animate automatically as computed values update.

.donut-segment {
 transition: stroke-dasharray 0.5s ease-out, stroke-dashoffset 0.5s ease-out;
}

The transition duration and easing function control the animation characteristics. An ease-out timing function creates a natural deceleration as the animation completes, while ease-in-out provides smooth acceleration and deceleration throughout. The 0.5-second duration balances responsiveness with visual polish, though values can be adjusted to match application design guidelines.

JavaScript Animation Techniques

For more complex animation scenarios, JavaScript-based approaches provide greater control over the animation process. Frame-based animation using requestAnimationFrame enables precise control over intermediate values, supporting custom easing functions and synchronized multi-segment updates.

animateSegment(targetValue) {
 const startValue = this.currentValue;
 const duration = 500;
 const startTime = performance.now();

 const animate = (currentTime) => {
 const elapsed = currentTime - startTime;
 const progress = Math.min(elapsed / duration, 1);
 const easedProgress = this.easeOutCubic(progress);
 this.currentValue = startValue + (targetValue - startValue) * easedProgress;

 if (progress < 1) {
 requestAnimationFrame(animate);
 }
 };
 requestAnimationFrame(animate);
}

Custom easing functions enable animations that match application design language. The cubic ease-out function provides a natural deceleration, while more complex functions can simulate physics-based motion or match specific animation guidelines. JavaScript animation also supports animation sequences, where multiple updates play in order rather than simultaneously.

Adding Count-Up Text Animations

Donut charts often include text displaying the current value or percentage, and animating this text alongside the chart creates a polished user experience. A count-up animation transitions the displayed number from a starting value to the target value, synchronized with the visual chart animation using the same easing function.

These animation techniques are essential for creating engaging user interfaces that communicate data changes clearly and delight users with smooth, natural transitions.

Accessibility Best Practices

ARIA Labels and Descriptions

Accessible donut charts provide screen reader users with equivalent information to visual users. ARIA attributes convey chart content, structure, and purpose to assistive technologies.

<svg
 role="img"
 :aria-label="chartLabel"
 aria-describedby="chart-desc"
>
 <title id="chart-title">{{ title }}</title>
 <desc id="chart-desc">{{ description }}</desc>
</svg>

The role="img" attribute identifies the element as an image, while aria-label provides a concise description. The <title> and <desc> elements offer structured content that screen readers can access. For complex charts with multiple segments, additional ARIA attributes can describe segment values and relationships.

Color Contrast and Visual Indicators

Color choices for donut chart segments must meet accessibility guidelines for contrast ratios. WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and graphical objects. Segment colors should be tested against background colors to ensure readability.

Beyond color, chart accessibility benefits from additional visual indicators such as patterns, labels, or legends. Users with color vision deficiencies can distinguish segments through multiple visual channels, ensuring chart information remains accessible regardless of color perception ability.

Implementing proper accessibility is a core aspect of professional web accessibility services. Ensuring that data visualizations are accessible to all users not only improves the user experience but also helps organizations meet compliance requirements and reach a broader audience.

Advanced Implementations

Multi-Ring Donut Charts

Complex visualizations sometimes require multiple concentric rings, with each ring representing a different data dimension. This approach enables comparison across categories while utilizing shared spatial dimensions efficiently.

computed: {
 rings() {
 return this.data.rings.map((ring, index) => ({
 ...ring,
 radius: this.baseRadius - (index * (this.strokeWidth + this.spacing))
 }));
 }
}

Multi-ring charts require careful visual design to prevent cognitive overload. Ring count typically remains limited to three or fewer, with clear visual hierarchy and labeling to guide interpretation.

Interactive Segments with Tooltips

Interactive donut charts reveal additional information when users hover over or click segments. Tooltip implementations vary from simple browser title attributes to sophisticated custom overlays.

handleMouseEnter(segment, event) {
 this.tooltipVisible = true;
 this.tooltipContent = segment.tooltip;
 this.tooltipPosition = {
 x: event.clientX,
 y: event.clientY
 };
}

Event handlers track mouse position and segment identity, updating tooltip state accordingly. The tooltip component positions itself based on mouse coordinates, appearing near the cursor to provide context without obscuring the chart.

Performance Optimization

Efficient donut chart implementations minimize unnecessary recalculation through memoization and careful change detection. Vue's computed properties automatically cache results until dependencies change, providing optimization without explicit memoization code.

• Memoization through Vue computed properties
• Careful change detection
• Debouncing frequent updates
• Consider canvas for many segments (dozens+)

For most business dashboard and data visualization applications, SVG provides an optimal balance of development efficiency, visual quality, and performance. The techniques covered in this guide extend beyond donut charts to other SVG-based visualizations, including progress indicators, circular gauges, and radial charts.

Sources

1. Sergio Carracedo: Creating a simple donut progress chart - Comprehensive tutorial on SVG donut charts using Vue.js and the stroke-dasharray technique
2. vue-svg-charts GitHub Repository - Lightweight Vue components for drawing pure SVG charts without external dependencies
3. Codeburst: Creating SVG Pie Chart with Vue.js - Vue.js component patterns for pie and donut chart creation
4. W3Schools: SVG Stroke Attributes - Documentation on stroke-dasharray and stroke-dashoffset
5. MDN Web Docs: SVG - Complete SVG reference documentation