syncfusion-react-sparkline

Implementing Syncfusion React Sparklines

A comprehensive guide for implementing Syncfusion React Sparkline components - lightweight, compact charts designed to visualize data trends in minimal space without axes or coordinates.

When to Use This Skill

Use this skill when you need to:

• Create compact data visualizations in dashboards or grids
• Display trend indicators inline with data
• Implement mini charts that consume minimal space
• Show data patterns in table cells or small containers
• Create any of the 5 sparkline types: Line, Column, Area, Win-Loss, or Pie
• Add tooltips, markers, or data labels to sparklines
• Customize sparkline appearance with themes and colors
• Implement accessible, responsive sparkline visualizations
• Integrate sparklines with grids or other components
• Highlight specific data ranges with range bands

Component Overview

The Syncfusion React Sparkline is a highly condensed chart component that presents data in a simple, compact format. Key features include:

• 5 Sparkline Types: Line, Column, Area, Win-Loss, and Pie
• Interactive Features: Tooltips with customization and templates, track lines
• Visual Markers: Highlight start, end, high, low, and negative points
• Data Labels: Display values at specific points with formatting
• Range Bands: Highlight specific value ranges along the y-axis
• Axis Customization: Support for Numeric, Category, and DateTime value types
• Themes: Material, Fabric, Bootstrap, and Highcontrast themes
• Accessibility: WCAG 2.2, Section 508 compliance with WAI-ARIA support
• Grid Integration: Designed to work seamlessly within grid cells
• Localization: Support for internationalization

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Dependencies and package installation (@syncfusion/ej2-react-charts)
• Creating React application with Vite
• Adding SparklineComponent to project
• Module injection for tooltip feature
• Binding data source with dataSource property
• Changing sparkline type (Line, Column, Area, Win-Loss, Pie)
• Basic tooltip configuration
• First working example

Sparkline Types

📄 Read: references/sparkline-types.md

• Overview of all 5 sparkline types
• Line type: Continuous trend visualization
• Column type: Discrete value comparison
• Area type: Filled trend visualization
• Win-Loss type: Binary outcome representation
• Pie type: Proportional data display
• Type selection guide based on data and use case
• Complete examples for each type

Appearance Customization

📄 Read: references/appearance-customization.md

• Sparkline border configuration with containerArea
• Padding customization (left, right, top, bottom)
• Container background color
• Theme selection (Material, Fabric, Bootstrap, Highcontrast)
• Color and styling best practices
• Visual design guidelines

Data Labels

📄 Read: references/data-labels.md

• Enabling data labels for specific points
• Visibility options: All, Start, End, High, Low, Negative
• Customizing fill color, border, opacity, and text styles
• Formatting data label text with format property
• Displaying x and y values together
• Data label positioning and readability

Markers

📄 Read: references/markers.md

• Adding markers to sparkline points
• Marker visibility options: All, Start, End, High, Low, Negative
• Special point marker configuration
• Customizing marker fill, border, size, and opacity
• Combining markers with other features
• Best practices for marker usage

User Interaction

📄 Read: references/user-interaction.md

• Tooltip configuration and SparklineTooltip injection
• Tooltip customization (fill, text styles, format, border)
• Creating custom tooltip templates with HTML
• Track line feature for mouse tracking
• Track line color and styling
• Interactive feature best practices

Advanced Features

📄 Read: references/advanced-features.md

• Axis customization with valueType (Numeric, Category, DateTime)
• Setting min/max values (minX, maxX, minY, maxY)
• Axis line customization (color, width, opacity, dashArray)
• Range bands for highlighting value ranges
• Multiple range band configuration
• Special points customization (start, end, positive, negative, low)
• Tie point color for Win-Loss sparklines
• Sparkline dimensions (container, pixel, percentage sizing)
• Localization and culture support

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 and Section 508 compliance
• WAI-ARIA attributes (img role, aria-label, aria-hidden)
• Keyboard interaction (Ctrl + P for printing)
• Screen reader support
• Right-to-left (RTL) support
• Color contrast guidelines
• Mobile device support
• Accessibility testing tools

API Reference

📄 Read: references/api-reference.md

• Complete API reference for SparklineComponent: props, events, methods, child directives, and a usage example (based on the official Syncfusion React Sparkline API).

Quick Start

Installation

npm install @syncfusion/ej2-react-charts --save

Basic Sparkline

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
    />
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

Sparkline with Tooltip

import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      tooltipSettings={{ visible: true, format: '${x} : ${y}' }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

Common Patterns

Column Sparkline with Markers

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function ColumnSparkline() {
  const data = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      markerSettings={{ visible: ['High', 'Low'] }}
      highPointColor="green"
      lowPointColor="red"
    />
  );
}

export default ColumnSparkline;
ReactDOM.render(<ColumnSparkline />, document.getElementById('charts'));

Win-Loss Sparkline

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function WinLossSparkline() {
  const data = [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="WinLoss"
      height="150px"
      width="300px"
      tiePointColor="blue"
    />
  );
}

export default WinLossSparkline;
ReactDOM.render(<WinLossSparkline />, document.getElementById('charts'));

Sparkline with Data Labels

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithLabels() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Start', 'End'],
        border: { color: 'blue', width: 1 },
        fill: 'blue',
        opacity: 0.4,
        textStyle: { color: 'white' }
      }}
    />
  );
}

export default SparklineWithLabels;
ReactDOM.render(<SparklineWithLabels />, document.getElementById('charts'));

Sparkline with Range Band

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithRangeBand() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      rangeBandSettings={[
        { startRange: 1, endRange: 3, color: '#bfd4fc', opacity: 0.4 }
      ]}
    />
  );
}

export default SparklineWithRangeBand;
ReactDOM.render(<SparklineWithRangeBand />, document.getElementById('charts'));

Key Props Reference

Property	Type	Description
dataSource	object[]	Data for the sparkline
type	string	Sparkline type: 'Line', 'Column', 'Area', 'WinLoss', 'Pie'
xName	string	Property name for x-axis from dataSource
yName	string	Property name for y-axis from dataSource
height	string	Height of the sparkline
width	string	Width of the sparkline
fill	string	Color of the sparkline
valueType	string	Axis value type: 'Numeric', 'Category', 'DateTime'
markerSettings	object	Configuration for markers
dataLabelSettings	object	Configuration for data labels
tooltipSettings	object	Configuration for tooltips
axisSettings	object	Axis min/max and line customization
rangeBandSettings	object[]	Range band configurations
theme	string	Theme: 'Material', 'Fabric', 'Bootstrap', 'Highcontrast'
padding	object	Padding around sparkline (left, right, top, bottom)
containerArea	object	Border and background for sparkline area

Common Use Cases

1. Dashboard Trend Indicators: Display KPI trends inline with metrics
2. Grid Integration: Show mini charts in table cells
3. Financial Data: Win-Loss sparklines for stock market gains/losses
4. Performance Monitoring: Quick visualization of server metrics or response times
5. Comparison Views: Multiple sparklines side-by-side for data comparison
6. Mobile Dashboards: Compact visualizations for small screens
7. Email Reports: Lightweight charts that render quickly
8. Real-time Monitoring: Simple, fast-updating visualizations

Next Steps

1. Start with Getting Started: Read references/getting-started.md for installation and basic setup
2. Choose Your Type: Read references/sparkline-types.md to select the right sparkline type
3. Customize Appearance: Read references/appearance-customization.md for styling
4. Add Interactivity: Read references/user-interaction.md for tooltips and track lines
5. Advanced Configuration: Read references/advanced-features.md for axis, range bands, and more