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

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

Accessibility

Table of Contents

• Overview
• Accessibility Standards Compliance
• WAI-ARIA Attributes
• Keyboard Interaction
• Screen Reader Support
• Right-to-Left (RTL) Support
• Color Contrast
• Mobile Device Support
• Accessibility Testing
• Best Practices

Overview

The Syncfusion React Sparkline component follows accessibility guidelines and standards to ensure usability for all users, including those with disabilities. The component implements WAI-ARIA patterns, supports keyboard navigation, and provides screen reader compatibility.

Supported Standards:

• ADA (Americans with Disabilities Act)
• Section 508
• WCAG 2.2 (Web Content Accessibility Guidelines)
• WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)

Accessibility Standards Compliance

The Sparkline component's compliance with various accessibility standards:

Support Levels:

• Full (✓): All features meet the requirement
• Partial (⚠): Some features meet the requirement
• Not Supported (✗): Component does not meet the requirement

Compliance Notes

Full Support:

• Right-to-left (RTL) language display
• Color contrast ratios meet WCAG AA standards
• Mobile touch interactions
• Automated accessibility testing validation

Partial Support:

• WCAG 2.2: Core features comply, advanced features in progress
• Section 508: Basic requirements met
• Screen readers: Works with major readers, continuous improvements
• Keyboard navigation: Print functionality available

WAI-ARIA Attributes

The Sparkline component implements WAI-ARIA attributes to provide semantic information to assistive technologies.

Implemented ARIA Attributes

ARIA Label Example

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

function AccessibleSparkline() {
  const salesData: number[] = [120, 150, 130, 180, 160, 200];
  
  return (
    <div role="region" aria-label="Sales Trend Visualization">
      <h3 id="sparkline-title">Monthly Sales Trend</h3>
      <SparklineComponent
        dataSource={salesData}
        type="Area"
        height="150px"
        width="400px"
        fill="#4A90E2"
        opacity={0.4}
      />
      <p className="sr-only">
        Sales data shows an upward trend from 120 to 200 over 6 months,
        with the highest value of 200 in the final month.
      </p>
    </div>
  );
}

export default AccessibleSparkline;

Screen Reader Text

Include descriptive text for screen readers:

function SparklineWithDescription() {
  const performanceScores: number[] = [65, 72, 68, 80, 85, 78, 92];
  const average = performanceScores.reduce((a, b) => a + b) / performanceScores.length;
  const max = Math.max(...performanceScores);
  const min = Math.min(...performanceScores);
  
  return (
    <div>
      <h3>Weekly Performance</h3>
      <SparklineComponent
        dataSource={performanceScores}
        type="Line"
        height="150px"
        width="400px"
        fill="#4CAF50"
        lineWidth={2}
      />
      <div className="sr-only">
        Performance scores range from {min} to {max}, 
        with an average of {average.toFixed(1)}. 
        The trend shows improvement over the 7-week period.
      </div>
    </div>
  );
}

CSS for screen reader only text:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Keyboard Interaction

The Sparkline component follows keyboard interaction guidelines for accessibility.

Supported Keyboard Shortcuts

Print Functionality Example

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

function PrintableSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <div>
      <p>Press <kbd>Ctrl + P</kbd> to print this sparkline</p>
      <SparklineComponent
        dataSource={data}
        type="Line"
        height="150px"
        width="300px"
      />
    </div>
  );
}

export default PrintableSparkline;

Focus Management

Ensure sparkline containers are keyboard accessible:

function FocusableSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <div 
      tabIndex={0}
      role="img"
      aria-label="Sales trend showing fluctuating values"
      style={{ 
        border: '2px solid transparent',
        padding: '10px',
        borderRadius: '4px'
      }}
      onFocus={(e) => e.currentTarget.style.borderColor = '#4A90E2'}
      onBlur={(e) => e.currentTarget.style.borderColor = 'transparent'}
    >
      <SparklineComponent
        dataSource={data}
        type="Area"
        height="150px"
        width="300px"
      />
    </div>
  );
}

Screen Reader Support

The sparkline is compatible with major screen readers including JAWS, NVDA, and VoiceOver.

Screen Reader Best Practices

1. Provide Context

function ContextualSparkline() {
  const data: number[] = [120, 150, 130, 180, 160, 200];
  
  return (
    <section aria-labelledby="sales-heading">
      <h2 id="sales-heading">Q1 Sales Performance</h2>
      <p>
        Sales have increased from $120K in January to $200K in June,
        representing 67% growth.
      </p>
      <SparklineComponent
        dataSource={data}
        type="Column"
        height="150px"
        width="400px"
        fill="#4CAF50"
      />
    </section>
  );
}

2. Data Tables for Complex Data

Provide a data table alternative for screen reader users:

function SparklineWithTable() {
  const monthlyData = [
    { month: 'Jan', sales: 120 },
    { month: 'Feb', sales: 150 },
    { month: 'Mar', sales: 130 },
    { month: 'Apr', sales: 180 },
    { month: 'May', sales: 160 },
    { month: 'Jun', sales: 200 }
  ];
  
  return (
    <div>
      <h3>Monthly Sales</h3>
      <SparklineComponent
        dataSource={monthlyData}
        xName="month"
        yName="sales"
        type="Area"
        height="150px"
        width="400px"
        fill="#4A90E2"
        opacity={0.4}
      />
      
      <details>
        <summary>View data table</summary>
        <table>
          <caption>Monthly Sales Data (in thousands)</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">Sales ($K)</th>
            </tr>
          </thead>
          <tbody>
            {monthlyData.map((item, index) => (
              <tr key={index}>
                <td>{item.month}</td>
                <td>{item.sales}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </details>
    </div>
  );
}

3. Announce Dynamic Changes

function DynamicSparkline() {
  const [data, setData] = React.useState([3, 6, 4, 1, 3, 2, 5]);
  const [announcement, setAnnouncement] = React.useState('');
  
  const refreshData = () => {
    const newData = Array.from({ length: 7 }, () => Math.floor(Math.random() * 10));
    setData(newData);
    setAnnouncement(`Data updated. New average: ${(newData.reduce((a, b) => a + b) / newData.length).toFixed(1)}`);
  };
  
  return (
    <div>
      <button onClick={refreshData}>Refresh Data</button>
      <SparklineComponent
        dataSource={data}
        type="Line"
        height="150px"
        width="300px"
      />
      <div aria-live="polite" aria-atomic="true" className="sr-only">
        {announcement}
      </div>
    </div>
  );
}

Right-to-Left (RTL) Support

The Sparkline component fully supports RTL languages like Arabic and Hebrew.

Enabling RTL

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

function AccessibleSparkline() {
  const salesData = [120, 150, 130, 180, 160, 200];
  
  return (
    <div role="region" aria-label="Sales Trend Visualization">
      <h3 id="sparkline-title">Monthly Sales Trend</h3>
      <SparklineComponent
        enableRtl={true}
        dataSource={salesData}
        type="Area"
        height="150px"
        width="400px"
        fill="#4A90E2"
        opacity={0.4}
        tooltipSettings={{
          visible: true
        }}
      />
      <p className="sr-only">
        Sales data shows an upward trend from 120 to 200 over 6 months,
        with the highest value of 200 in the final month.
      </p>
    </div>
  );
}

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

Color Contrast

The Sparkline component meets WCAG AA color contrast requirements.

Contrast Guidelines

WCAG AA Requirements:

• Normal text: Minimum 4.5:1 contrast ratio
• Large text: Minimum 3:1 contrast ratio
• UI components: Minimum 3:1 contrast ratio

High Contrast Examples

function HighContrastSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      fill="#0066CC"      // Dark blue - good contrast
      lineWidth={3}        // Thicker for visibility
      markerSettings={{
        visible: ['All'],
        size: 8,
        fill: '#0066CC',
        border: {
          color: '#FFFFFF',
          width: 2          // White border for contrast
        }
      }}
    />
  );
}

Dark Mode Accessibility

function DarkModeAccessible() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <div style={{ backgroundColor: '#1E1E1E', padding: '20px' }}>
      <SparklineComponent
        dataSource={data}
        type="Area"
        height="150px"
        width="300px"
        theme="Highcontrast"
        fill="#00E676"      // Bright green for dark background
        opacity={0.6}
        border={{ color: '#00E676', width: 2 }}
        dataLabelSettings={{
          visible: ['High', 'Low'],
          fill: '#FFFFFF',
          textStyle: {
            color: '#1E1E1E',
            fontWeight: 'bold'
          }
        }}
      />
    </div>
  );
}

Color Blind Friendly

Use patterns in addition to color:

function ColorBlindFriendly() {
  const data: number[] = [5, 8, -3, 10, -2, 7, -5, 12];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      fill="#0077BB"          // Blue (distinguishable)
      negativePointColor="#CC3311"  // Red (distinct from blue)
      markerSettings={{
        visible: ['All'],
        size: 6,
        fill: '#FFFFFF',
        border: { color: '#000000', width: 2 }
      }}
    />
  );
}

Mobile Device Support

The Sparkline component is fully optimized for mobile devices and touch interactions.

Touch-Friendly Sparkline

function TouchFriendlySparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="180px"      // Larger for mobile
      width="100%"
      fill="#4A90E2"
      opacity={0.4}
      markerSettings={{
        visible: ['All'],
        size: 10          // Larger markers for touch
      }}
      tooltipSettings={{
        visible: true,
        format: 'Value: ${y}',
        textStyle: { size: '14px' }  // Larger text for mobile
      }}
    />
  );
}

Responsive Design

function ResponsiveAccessibleSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <div style={{ 
      width: '100%', 
      maxWidth: '600px',
      minHeight: '150px',
      padding: '15px'
    }}>
      <SparklineComponent
        dataSource={data}
        type="Line"
        height="150px"
        width="100%"
        fill="#2196F3"
        lineWidth={3}
        markerSettings={{
          visible: ['All'],
          size: 8
        }}
      />
    </div>
  );
}

Accessibility Testing

The Sparkline component passes validation from industry-standard accessibility testing tools.

Supported Testing Tools

1. Accessibility Checker: NPM package for automated validation 2. Axe-core: Industry-standard accessibility testing

Testing Example

# Install accessibility testing tools
npm install --save-dev accessibility-checker axe-core

Best Practices

1. Always Provide Context

// ✅ Good: Clear context
function ContextualSparkline() {
  return (
    <section aria-labelledby="trend-heading">
      <h3 id="trend-heading">Website Traffic Trend</h3>
      <p>Showing daily visitors for the past week</p>
      <SparklineComponent dataSource={data} type="Line" height="150px" width="300px" />
    </section>
  );
}

// ❌ Bad: No context
function NoContextSparkline() {
  return <SparklineComponent dataSource={data} type="Line" height="150px" width="300px" />;
}

2. Include Text Alternatives

Provide screen reader descriptions for visual-only information:

function TextAlternativeSparkline() {
  const data: number[] = [120, 150, 130, 180, 160, 200];
  const trend = data[data.length - 1] > data[0] ? 'increasing' : 'decreasing';
  
  return (
    <div>
      <SparklineComponent dataSource={data} type="Area" height="150px" width="300px" />
      <p className="sr-only">
        Sales trend is {trend}, from {data[0]} to {data[data.length - 1]}
      </p>
    </div>
  );
}

3. Ensure Sufficient Color Contrast

Use tools to verify contrast ratios:

// ✅ Good: High contrast (4.5:1+)
<SparklineComponent
  fill="#0066CC"
  dataLabelSettings={{
    fill: "#FFFFFF",
    textStyle: { color: "#000000" }
  }}
/>

// ❌ Bad: Low contrast
<SparklineComponent
  fill="#DDDDDD"
  dataLabelSettings={{
    fill: "#EEEEEE",
    textStyle: { color: "#CCCCCC" }
  }}
/>

4. Test with Assistive Technologies

Regularly test with:

• Screen readers (JAWS, NVDA, VoiceOver)
• Keyboard-only navigation
• Mobile screen readers (TalkBack, VoiceOver)
• Browser zoom (200%+)

5. Provide Data Tables for Complex Sparklines

When sparklines show critical data, provide tabular alternatives:

function AccessibleComplexSparkline() {
  const data = [...]; // Complex dataset
  
  return (
    <div>
      <SparklineComponent dataSource={data} type="Line" height="150px" width="300px" />
      <button onClick={() => showDataTable()}>View as table</button>
    </div>
  );
}

Summary

• Standards: Complies with ADA, Section 508, WCAG 2.2, WAI-ARIA
• ARIA: Uses role="img", aria-label, aria-hidden attributes
• Keyboard: Supports Ctrl+P for printing
• Screen Readers: Compatible with JAWS, NVDA, VoiceOver
• RTL: Full support for right-to-left languages
• Contrast: Meets WCAG AA color contrast requirements
• Mobile: Touch-friendly with responsive design
• Testing: Passes accessibility-checker and axe-core validation
• Best Practices: Provide context, text alternatives, and test regularly

Advanced Features

Table of Contents

• Overview
• Axis Customization
• Value Types
• Min and Max Values
• Axis Line Customization
• Range Bands
• Single Range Band
• Multiple Range Bands
• Special Points Customization
• Point Colors
• Tie Point Color
• Sparkline Dimensions
• Container Size
• Fixed Dimensions
• Percentage Dimensions
• Localization

Overview

This guide covers advanced sparkline features including axis customization, range bands, special point colors, dimension control, and localization. These features provide fine-grained control over sparkline behavior and appearance.

Axis Customization

Value Types

You can change the sparkline axis value type to handle different data formats.

Available Value Types

DateTime Value Type

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

function DateTimeSparkline() {
  const data = [
    { date: new Date(2024, 0, 1), value: 100 },
    { date: new Date(2024, 1, 1), value: 120 },
    { date: new Date(2024, 2, 1), value: 110 },
    { date: new Date(2024, 3, 1), value: 140 },
    { date: new Date(2024, 4, 1), value: 130 },
    { date: new Date(2024, 5, 1), value: 160 }
  ];
  
  return (
    <SparklineComponent
      dataSource={data}
      xName="date"
      yName="value"
      valueType="DateTime"
      type="Line"
      height="150px"
      width="400px"
    />
  );
}

export default DateTimeSparkline;

Category Value Type

function CategorySparkline() {
  const data = [
    { product: 'Product A', sales: 35 },
    { product: 'Product B', sales: 28 },
    { product: 'Product C', sales: 42 },
    { product: 'Product D', sales: 38 },
    { product: 'Product E', sales: 50 }
  ];
  
  return (
    <SparklineComponent
      dataSource={data}
      xName="product"
      yName="sales"
      valueType="Category"
      type="Column"
      height="150px"
      width="400px"
    />
  );
}

Numeric Value Type (Default)

function NumericSparkline() {
  const data = [
    { x: 0, y: 100 },
    { x: 1, y: 120 },
    { x: 2, y: 110 },
    { x: 3, y: 140 },
    { x: 4, y: 130 }
  ];
  
  return (
    <SparklineComponent
      dataSource={data}
      xName="x"
      yName="y"
      valueType="Numeric"
      type="Area"
      height="150px"
      width="300px"
    />
  );
}

Min and Max Values

Control the axis range by setting minimum and maximum values for both X and Y axes.

Setting Y-Axis Range

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

function YAxisRangeSparkline() {
  const data: number[] = [15, 23, 18, 30, 28, 35, 32];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      axisSettings={{
        minY: 0,
        maxY: 50
      }}
    />
  );
}

export default YAxisRangeSparkline;

Setting X-Axis Range

function XAxisRangeSparkline() {
  const data = [
    { x: 5, y: 100 },
    { x: 10, y: 120 },
    { x: 15, y: 110 },
    { x: 20, y: 140 },
    { x: 25, y: 130 }
  ];
  
  return (
    <SparklineComponent
      dataSource={data}
      xName="x"
      yName="y"
      type="Area"
      height="150px"
      width="300px"
      axisSettings={{
        minX: 0,
        maxX: 30,
        minY: 80,
        maxY: 160
      }}
    />
  );
}

Use Cases for Min/Max

// Normalize different datasets to same scale
function NormalizedComparison() {
  const dataset1: number[] = [15, 23, 18, 30, 28];
  
  const commonAxisSettings = {
    minY: 0,
    maxY: 100
  };
  
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <SparklineComponent
        dataSource={dataset1}
        type="Line"
        height="150px"
        width="200px"
        axisSettings={commonAxisSettings}
      />
    </div>
  );
}

Axis Line Customization

Customize or hide the axis line with the axisSettings.lineSettings property.

Note: Axis line customization is not applicable for Win-Loss sparklines.

Setting Axis Line Value

Define where the horizontal axis line appears:

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

function AxisLineValue() {
  const data: number[] = [3, 6, -2, 4, -1, 3, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      axisSettings={{
        value: 0  // Axis line at y=0
      }}
    />
  );
}

export default AxisLineValue;

Custom Axis Line Appearance

function CustomAxisLine() {
  const data: number[] = [5, 8, -3, 10, -2, 7, -5, 12];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      axisSettings={{
        value: 0,
        lineSettings: {
          visible: true,
          color: '#F44336',
          width: 2,
          opacity: 0.8
        }
      }}
    />
  );
}

Dashed Axis Line

function DashedAxisLine() {
  const data: number[] = [3, 6, -2, 4, -1, 3, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      axisSettings={{
        value: 0,
        lineSettings: {
          visible: true,
          color: '#666666',
          width: 1,
          dashArray: '5,5'  // Dashed line
        }
      }}
    />
  );
}

Hide Axis Line

function HiddenAxisLine() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      axisSettings={{
        lineSettings: {
          visible: false  // Hide axis line
        }
      }}
    />
  );
}

Range Bands

Range bands highlight specific value ranges along the Y-axis, useful for showing target zones, acceptable ranges, or critical thresholds.

Single Range Band

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

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

export default SingleRangeBand;

Range Band Properties

Target Zone Range Band

function TargetZone() {
  const performanceData: number[] = [65, 72, 68, 80, 85, 78, 92, 75, 88];
  
  return (
    <SparklineComponent
      dataSource={performanceData}
      type="Line"
      height="150px"
      width="400px"
      fill="#2196F3"
      lineWidth={2}
      rangeBandSettings={[
        {
          startRange: 70,
          endRange: 90,
          color: '#4CAF50',
          opacity: 0.2
        }
      ]}
    />
  );
}

Multiple Range Bands

Define multiple range bands to highlight different zones:

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

function MultipleRangeBands() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5, 4, 7, 3, 8];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="180px"
      width="400px"
      fill="#2196F3"
      opacity={0.5}
      rangeBandSettings={[
        {
          startRange: 0,
          endRange: 3,
          color: '#F44336',
          opacity: 0.3
        },
        {
          startRange: 3,
          endRange: 6,
          color: '#FFC107',
          opacity: 0.3
        },
        {
          startRange: 6,
          endRange: 10,
          color: '#4CAF50',
          opacity: 0.3
        }
      ]}
    />
  );
}

export default MultipleRangeBands;

Performance Zones Example

function PerformanceZones() {
  const scores: number[] = [45, 62, 55, 78, 85, 92, 68, 88, 75, 95];
  
  return (
    <div style={{ padding: '20px' }}>
      <h3 style={{ margin: '0 0 10px 0' }}>
        Performance Scores
      </h3>
      <div style={{ display: 'flex', gap: '10px', marginBottom: '10px', fontSize: '12px' }}>
        <span style={{ color: '#F44336' }}>🔴 Below Average (0-60)</span>
        <span style={{ color: '#FFC107' }}>🟡 Average (60-80)</span>
        <span style={{ color: '#4CAF50' }}>🟢 Excellent (80-100)</span>
      </div>
      <SparklineComponent
        dataSource={scores}
        type="Line"
        height="150px"
        width="100%"
        fill="#2196F3"
        lineWidth={3}
        rangeBandSettings={[
          {
            startRange: 0,
            endRange: 60,
            color: '#F44336',
            opacity: 0.15
          },
          {
            startRange: 60,
            endRange: 80,
            color: '#FFC107',
            opacity: 0.15
          },
          {
            startRange: 80,
            endRange: 100,
            color: '#4CAF50',
            opacity: 0.15
          }
        ]}
        axisSettings={{
          minY: 0,
          maxY: 100
        }}
        markerSettings={{
          visible: ['All'],
          size: 6,
          fill: '#2196F3',
          border: { color: '#FFFFFF', width: 2 }
        }}
      />
    </div>
  );
}

Special Points Customization

Customize colors for special data points to differentiate start, end, high, low, positive, and negative values.

Note: Special points customization is only applicable for Line, Column, and Area sparkline types.

Point Colors

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

function SpecialPointColors() {
  const data: number[] = [5, 12, -3, 18, 8, -5, 15, 10, 20];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="400px"
      fill="#673AB7"
      lineWidth={2}
      startPointColor="#2196F3"
      endPointColor="#FF9800"
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
      negativePointColor="#E91E63"
      markerSettings={{
        visible: ['Start', 'End', 'High', 'Low', 'Negative'],
        size: 8
      }}
    />
  );
}

export default SpecialPointColors;

Available Point Color Properties

Column with Positive/Negative Colors

function PositiveNegativeColumn() {
  const data: number[] = [5, 8, -3, 10, -2, 7, -5, 12, 3, -1];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="350px"
      positivePointColor="#4CAF50"
      negativePointColor="#F44336"
    />
  );
}

Area with High/Low Emphasis

function HighLowArea() {
  const data: number[] = [15, 23, 18, 30, 28, 35, 32, 25, 38];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="400px"
      fill="#9C27B0"
      opacity={0.5}
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
      markerSettings={{
        visible: ['High', 'Low'],
        size: 10,
        border: { color: '#FFFFFF', width: 2 }
      }}
    />
  );
}

Tie Point Color

For Win-Loss sparklines, use tiePointColor to customize the color of zero-value points.

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

function WinLossTiePoints() {
  const results: number[] = [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10];
  
  return (
    <SparklineComponent
      dataSource={results}
      type="WinLoss"
      height="120px"
      width="400px"
      fill="#4CAF50"
      negativePointColor="#F44336"
      tiePointColor="#2196F3"
    />
  );
}

export default WinLossTiePoints;

Win-Loss Color Explanation

function WinLossExplained() {
  const data: number[] = [5, -3, 8, -2, 0, 7, -5, 10, 0, 3];
  
  return (
    <div style={{ padding: '20px' }}>
      <h3 style={{ margin: '0 0 10px 0' }}>Game Results</h3>
      <div style={{ display: 'flex', gap: '15px', marginBottom: '10px', fontSize: '12px' }}>
        <span>🟢 Win (positive)</span>
        <span>🔴 Loss (negative)</span>
        <span>🔵 Tie (zero)</span>
      </div>
      <SparklineComponent
        dataSource={data}
        type="WinLoss"
        height="120px"
        width="100%"
        fill="#4CAF50"
        negativePointColor="#F44336"
        tiePointColor="#2196F3"
      />
    </div>
  );
}

Sparkline Dimensions

Control sparkline size through container dimensions, fixed pixel values, or percentage values.

Container Size

Sparkline can adapt to its container's dimensions:

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

function ContainerSizeSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <div style={{ width: '650px', height: '350px' }}>
      <SparklineComponent
        dataSource={data}
        type="Line"
      />
    </div>
  );
}

export default ContainerSizeSparkline;

Fixed Dimensions

Pixel Values

Set exact dimensions using pixel values:

function PixelDimensions() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      width="500px"
      height="200px"
    />
  );
}

Small Sparkline

function SmallSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      width="150px"
      height="60px"
      lineWidth={2}
    />
  );
}

Large Dashboard Sparkline

function LargeDashboardSparkline() {
  const data: number[] = [15, 23, 18, 30, 28, 35, 32];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      width="800px"
      height="300px"
      fill="#4A90E2"
      opacity={0.4}
    />
  );
}

Percentage Dimensions

Set dimensions as percentages of the container:

function PercentageDimensions() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <div style={{ width: '800px', height: '400px' }}>
      <SparklineComponent
        dataSource={data}
        type="Column"
        width="100%"
        height="50%"
      />
    </div>
  );
}

Percentage behavior: Sparkline calculates its size relative to the container. For example, height="50%" renders the sparkline at half the container's height.

Responsive Sparkline

function ResponsiveSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <div style={{ width: '100%', maxWidth: '600px', height: '200px' }}>
      <SparklineComponent
        dataSource={data}
        type="Area"
        width="100%"
        height="100%"
        fill="#9C27B0"
        opacity={0.5}
      />
    </div>
  );
}

Grid Cell Sparkline

function GridCellSparkline() {
  const data: number[] = [5, 8, 3, 10, 6];
  
  return (
    <div style={{ 
      display: 'inline-block', 
      width: '120px', 
      height: '40px',
      verticalAlign: 'middle'
    }}>
      <SparklineComponent
        dataSource={data}
        type="Line"
        width="100%"
        height="100%"
        fill="#4CAF50"
        lineWidth={2}
        padding={{ left: 0, right: 0, top: 0, bottom: 0 }}
      />
    </div>
  );
}

Localization

The sparkline component supports localization, particularly useful for tooltip formatting based on culture.

Tooltip with Currency Format

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

function LocalizedSparkline() {
  // Set culture to German
  setCulture('de');

  const salesData = [
    { month: 'Jan', sales: 1200 },
    { month: 'Feb', sales: 1500 },
    { month: 'Mar', sales: 1300 },
    { month: 'Apr', sales: 1800 },
    { month: 'May', sales: 1600 },
  ];

  return (
    <SparklineComponent
      id="sparkline"
      height="200px"
      width="350px"
      containerArea={{
        border: { color: '#033e96', width: 2 },
      }}
      tooltipSettings={{
        visible: true,
      }}
      // To specify currency format
      format={'c0'}
      useGroupingSeparator={true}
      lineWidth={3}
      padding={{ left: 20, right: 20, bottom: 20, top: 20 }}
      border={{ color: '#033e96', width: 2 }}
      type="Area"
      fill="#b2cfff"
      dataSource={[30000, 60000, 40000, 10000, 30000, 20000, 50000]}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

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

Multiple Cultures

function MultiCultureExample() {
  const data: number[] = [1200, 1500, 1300, 1800, 1600];
  
  // For US locale
  setCulture('en-US');
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      tooltipSettings={{
        visible: true
      }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

Summary

Axis Customization:

• Value types: Numeric, Category, DateTime
• Min/max control: axisSettings (minX, maxX, minY, maxY)
• Axis line: Customize color, width, opacity, dashArray

Range Bands:

• Highlight value ranges with startRange, endRange
• Multiple bands for different zones
• Useful for targets, thresholds, performance zones

Special Points:

• Customize colors: start, end, high, low, positive, negative
• Tie point color for Win-Loss sparklines
• Works with Line, Column, Area types

Dimensions:

• Container-based: Adapts to parent element
• Fixed: Pixel values (width="300px")
• Percentage: Relative to container (width="100%")

Localization:

• Culture-specific formatting in tooltips
• Currency and number format support

Sparkline API Reference

This file summarizes the main API surface of SparklineComponent (from @syncfusion/ej2-react-charts) to be used as a quick reference when implementing sparklines.

Import

import { SparklineComponent, RangeBandSettingsDirective, RangeBandSettingDirective } from '@syncfusion/ej2-react-charts';

Key Props (selected)

• dataSource (object[]): Data for the sparkline.
• type (SparklineType): 'Line' | 'Column' | 'Area' | 'WinLoss' | 'Pie'. See the official API: https://ej2.syncfusion.com/react/documentation/api/sparkline/sparklinetype
• xName (string): Field name for x values in dataSource.
• yName (string): Field name for y values in dataSource.
• height (string): Height of the sparkline (e.g., '100px').
• width (string): Width of the sparkline (e.g., '300px').
• fill (string): Primary fill color for the sparkline.
• valueType (SparklineValueType): 'Numeric' | 'Category' | 'DateTime'. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/sparklinevaluetype
• markerSettings (SparklineMarkerSettingsModel): Configuration for markers (visible points, size, fill, border). See: https://ej2.syncfusion.com/react/documentation/api/sparkline/sparklinemarkersettingsmodel
• dataLabelSettings (SparklineDataLabelSettingsModel): Configuration for data labels (visibility, format, style). See: https://ej2.syncfusion.com/react/documentation/api/sparkline/sparklinedatalabelsettingsmodel
• tooltipSettings (SparklineTooltipSettingsModel): Tooltip config (visible, format, template). See: https://ej2.syncfusion.com/react/documentation/api/sparkline/sparklinetooltipsettingsmodel
• axisSettings (AxisSettingsModel): Axis customization (minX, maxX, minY, maxY, line styles). See: https://ej2.syncfusion.com/react/documentation/api/sparkline/axissettingsmodel
• rangeBandSettings (RangeBandSettingsModel[]): Array of range band objects { startRange, endRange, color, opacity }. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/rangebandsettingsmodel
• padding (PaddingModel): Padding around container. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/paddingmodel
• containerArea (ContainerAreaModel): Configure container border/background. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/containerareamodel
• border (SparklineBorderModel): Point/line border settings. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/sparklinebordermodel
• theme (SparklineTheme): Theme name (Material, Fabric, Bootstrap, Highcontrast, etc.). See: https://ej2.syncfusion.com/react/documentation/api/sparkline/sparklinetheme
• useGroupingSeparator (boolean): Enable grouping separator (thousands separator).
• enablePersistence (boolean): Persist state across reloads.
• enableRtl (boolean): Enable right-to-left rendering.

Methods

• Official component API (methods listed on the component page): https://ej2.syncfusion.com/react/documentation/api/sparkline/index-default
• destroy(): void — Clean up and remove the component instance. (See methods on the API page)
• getModuleName(): string — Returns the module name. (See methods on the API page)
• renderSparkline(): void — Re-renders the sparkline (useful after programmatic changes). (See methods on the API page)

Events (selected)

• load — Fired before the sparkline starts loading. See event args: https://ej2.syncfusion.com/react/documentation/api/sparkline/isparklineloadeventargs
• loaded — Fired after the sparkline is rendered. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/isparklineloadedeventargs
• axisRendering — Fired while axis options are being processed. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/iaxisrenderingeventargs
• dataLabelRendering — Fired for each data label before it renders (can change args.text). See: https://ej2.syncfusion.com/react/documentation/api/sparkline/idatalabelrenderingeventargs
• markerRendering — Fired for each marker before render (can change fill/border). See: https://ej2.syncfusion.com/react/documentation/api/sparkline/imarkerrenderingeventargs
• pointRegionMouseClick — Mouse click on a point/region. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/ipointregioneventargs
• pointRegionMouseMove — Mouse move over a point/region. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/ipointregioneventargs
• pointRendering — Fired for each point before it renders. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/isparklinepointeventargs
• resize — Fired when the sparkline container is resized. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/isparklineresizeeventargs
• seriesRendering — Fired while series is being prepared. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/iseriesrenderingeventargs
• sparklineMouseClick / sparklineMouseMove — General mouse events on the sparkline. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/isparklinemouseeventargs
• tooltipInitialize — Fired before showing tooltip; can customize content. See: https://ej2.syncfusion.com/react/documentation/api/sparkline/itooltiprenderingeventargs

Child Directives

• RangeBandSettingsDirective / RangeBandSettingDirective — Configure one or more range bands.

Example range band directive:

<SparklineComponent ...>
  <RangeBandSettingsDirective>
    <RangeBandSettingDirective startRange={2} endRange={4} color="lightblue" opacity={0.4} />
  </RangeBandSettingsDirective>
</SparklineComponent>

Usage Example (condensed)

const data = [ { x:1, yval:5 }, { x:2, yval:6 }, { x:3, yval:5 } ];

<SparklineComponent
  id="sparkline"
  dataSource={data}
  xName="x"
  yName="yval"
  height="100px"
  width="300px"
  type="Line"
  markerSettings={{ visible: ['All'] }}
  dataLabelSettings={{ visible: ['End'], format: '${y}' }}
  tooltipSettings={{ visible: true }}
  load={(args) => { /* set theme or locale */ }}
  loaded={(args) => { /* post-render */ }}
/>

Notes & Links

• This is a condensed, curated reference — consult the official API for exhaustive typings and all nested models: https://ej2.syncfusion.com/react/documentation/api/sparkline/index-default

Appearance Customization

Table of contents

• Overview
• Sparkline Border
• Basic Border Configuration
• Border Properties
• Custom Border Styles
• No Border (Default)
• Sparkline Padding
• Setting Uniform Padding
• Individual Padding Control
• Zero Padding
• Sparkline Area Background
• Setting Background Color
• Background with Border
• Transparent Background (Default)
• Sparkline Themes
• Applying Themes
• Highcontrast Theme for Dark Mode
• Bootstrap Theme
• Fabric Theme
• Color Customization
• Fill Color
• Line Width (for Line type)
• Opacity (for Area type)
• Border for Area/Column
• Complete Styling Examples
• Professional Light Theme
• Dark Mode Sparkline
• Minimal Clean Design
• Vibrant Gradient-Style
• Best Practices
• Consistent Design Language
• Contrast for Readability
• Padding for Breathing Room
• Theme-Based Styling
• Color Meaning
• Summary

Overview

The appearance of the Syncfusion React Sparkline can be extensively customized to match your application's design system. This includes:

• Border: Customize the container area border
• Padding: Control spacing between container and sparkline
• Background: Set custom background colors
• Themes: Apply predefined themes (Material, Fabric, Bootstrap, Highcontrast)
• Colors: Customize fill colors, point colors, and more

Sparkline Border

The containerArea property with its border sub-property controls the border around the sparkline area.

Basic Border Configuration

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

function SparklineWithBorder() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      containerArea={{
        border: {
          color: '#033e96',
          width: 2
        }
      }}
    />
  );
}

export default SparklineWithBorder;

Border Properties

Custom Border Styles

function CustomBorderSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      fill="#4A90E2"
      containerArea={{
        border: {
          color: '#2C5F8D',
          width: 3
        }
      }}
    />
  );
}

No Border (Default)

function NoBorderSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      // No containerArea specified = no border
    />
  );
}

Sparkline Padding

Padding controls the space between the container edge and the sparkline itself. By default, padding is set to 5 pixels on all sides.

Setting Uniform Padding

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

function SparklineWithPadding() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      padding={{
        left: 20,
        right: 20,
        top: 20,
        bottom: 20
      }}
      containerArea={{
        border: { color: '#999', width: 1 }
      }}
    />
  );
}

export default SparklineWithPadding;

Individual Padding Control

function CustomPaddingSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="200px"
      width="400px"
      padding={{
        left: 10,
        right: 10,
        top: 30,    // More space at top
        bottom: 15  // Less space at bottom
      }}
      containerArea={{
        border: { color: '#4CAF50', width: 2 },
        background: '#f5f5f5'
      }}
    />
  );
}

Zero Padding

function NoPaddingSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      padding={{
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
      }}
    />
  );
}

Use case for zero padding: When you want the sparkline to fill the entire container, useful for grid cell integrations.

Sparkline Area Background

The background color of the sparkline container can be customized using the containerArea.background property. By default, the sparkline background is transparent.

Setting Background Color

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

function SparklineWithBackground() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      fill="#e3165b"
      containerArea={{
        background: '#ffffcc'
      }}
    />
  );
}

export default SparklineWithBackground;

Background with Border

function BackgroundWithBorder() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      fill="#2196F3"
      containerArea={{
        background: '#E3F2FD',
        border: {
          color: '#2196F3',
          width: 1
        }
      }}
      padding={{
        left: 15,
        right: 15,
        top: 15,
        bottom: 15
      }}
    />
  );
}

Transparent Background (Default)

function TransparentBackground() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      fill="#9C27B0"
      opacity={0.6}
      // No background specified = transparent
    />
  );
}

Sparkline Themes

The sparkline supports four predefined themes that control the colors of data labels and track lines:

• Material (default)
• Fabric
• Bootstrap
• Highcontrast

Applying Themes

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

function MaterialThemeSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      theme="Material"
      tooltipSettings={{
        visible: true
      }}
      dataLabelSettings={{
        visible: ['All']
      }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

export default MaterialThemeSparkline;

Highcontrast Theme for Dark Mode

The Highcontrast theme sets data label and track line colors to white for dark backgrounds:

function HighcontrastThemeSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <div style={{ backgroundColor: '#000', padding: '20px' }}>
      <SparklineComponent
        dataSource={data}
        type="Line"
        height="150px"
        width="300px"
        theme="Highcontrast"
        fill="#00BCD4"
        dataLabelSettings={{
          visible: ['Start', 'End'],
          textStyle: { size: '12px' }
        }}
        tooltipSettings={{
          visible: true
        }}
      >
        <Inject services={[SparklineTooltip]} />
      </SparklineComponent>
    </div>
  );
}

Bootstrap Theme

function BootstrapThemeSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      theme="Bootstrap"
      fill="#0275d8"
      dataLabelSettings={{
        visible: ['All'],
        textStyle: { size: '10px' }
      }}
    />
  );
}

Fabric Theme

function FabricThemeSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      theme="Fabric"
      fill="#0078d4"
      opacity={0.5}
      dataLabelSettings={{
        visible: ['High', 'Low']
      }}
    />
  );
}

Theme Impact:

• Themes primarily affect data label text colors and track line colors
• For light themes (Material, Fabric, Bootstrap): Uses black text
• For Highcontrast theme: Uses white text
• Does not affect sparkline fill colors (customize separately)

Color Customization

Beyond themes, you can customize individual colors for various sparkline elements.

Fill Color

The primary color of the sparkline:

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

Line Width (for Line type)

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

Opacity (for Area type)

function CustomOpacity() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      fill="#9C27B0"
      opacity={0.3}
    />
  );
}

Border for Area/Column

function CustomBorder() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      fill="#FF9800"
      border={{
        color: '#E65100',
        width: 2
      }}
    />
  );
}

Complete Styling Examples

Professional Light Theme

function ProfessionalLightSparkline() {
  const data = [
    { month: 'Jan', value: 45 },
    { month: 'Feb', value: 52 },
    { month: 'Mar', value: 48 },
    { month: 'Apr', value: 60 },
    { month: 'May', value: 58 },
    { month: 'Jun', value: 68 }
  ];
  
  return (
    <SparklineComponent
      dataSource={data}
      xName="month"
      yName="value"
      type="Area"
      height="200px"
      width="100%"
      theme="Material"
      fill="#4A90E2"
      opacity={0.4}
      border={{ color: '#4A90E2', width: 2 }}
      containerArea={{
        background: '#F8FAFC',
        border: { color: '#E2E8F0', width: 1 }
      }}
      padding={{
        left: 15,
        right: 15,
        top: 15,
        bottom: 15
      }}
      markerSettings={{
        visible: ['High', 'Low'],
        size: 6,
        fill: '#4A90E2',
        border: { color: '#fff', width: 2 }
      }}
    />
  );
}

Dark Mode Sparkline

function DarkModeSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5, 4, 6];
  
  return (
    <div style={{ backgroundColor: '#1E1E1E', padding: '20px' }}>
      <SparklineComponent
        dataSource={data}
        type="Column"
        height="150px"
        width="100%"
        theme="Highcontrast"
        fill="#00E676"
        containerArea={{
          background: '#2D2D2D',
          border: { color: '#404040', width: 1 }
        }}
        padding={{
          left: 12,
          right: 12,
          top: 12,
          bottom: 12
        }}
        highPointColor="#00E676"
        lowPointColor="#FF5252"
      />
    </div>
  );
}

Minimal Clean Design

function MinimalSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="80px"
      width="200px"
      fill="#000000"
      lineWidth={2}
      padding={{
        left: 5,
        right: 5,
        top: 5,
        bottom: 5
      }}
      // No border, no background = minimal look
    />
  );
}

Vibrant Gradient-Style

function VibrantGradientSparkline() {
  const data: number[] = [2, 8, 5, 3, 7, 4, 9, 6];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="180px"
      width="100%"
      fill="#FF6B6B"
      opacity={0.6}
      border={{ color: '#C92A2A', width: 3 }}
      containerArea={{
        background: 'linear-gradient(to bottom, #FFF5F5, #FFC9C9)',
        border: { color: '#FF6B6B', width: 2 }
      }}
      padding={{
        left: 20,
        right: 20,
        top: 20,
        bottom: 20
      }}
      markerSettings={{
        visible: ['All'],
        size: 5,
        fill: '#C92A2A',
        border: { color: '#fff', width: 1 }
      }}
    />
  );
}

Best Practices

1. Consistent Design Language

Match your sparkline theme and colors to your application's design system:

// Define theme colors
const brandColors = {
  primary: '#4A90E2',
  secondary: '#50C878',
  background: '#F8FAFC',
  border: '#E2E8F0'
};

function BrandedSparkline({ data }: { data: number[] }) {
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="100%"
      fill={brandColors.primary}
      opacity={0.4}
      containerArea={{
        background: brandColors.background,
        border: { color: brandColors.border, width: 1 }
      }}
    />
  );
}

2. Contrast for Readability

Ensure sufficient contrast, especially for data labels:

function AccessibleSparkline() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      fill="#0066CC"
      lineWidth={3}
      dataLabelSettings={{
        visible: ['Start', 'End'],
        fill: '#FFFFFF',
        border: { color: '#0066CC', width: 1 },
        textStyle: {
          color: '#0066CC',
          fontWeight: 'bold',
          size: '12px'
        }
      }}
    />
  );
}

3. Padding for Breathing Room

Use adequate padding to prevent sparkline from touching container edges:

function WellPaddedSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      padding={{
        left: 15,
        right: 15,
        top: 15,
        bottom: 15
      }}
      containerArea={{
        border: { color: '#ccc', width: 1 }
      }}
    />
  );
}

4. Theme-Based Styling

Adapt colors based on theme for dark mode support:

function ThemeAwareSparkline({ isDarkMode }: { isDarkMode: boolean }) {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  const colors = isDarkMode
    ? {
        fill: '#00E676',
        background: '#2D2D2D',
        border: '#404040',
        theme: 'Highcontrast' as const
      }
    : {
        fill: '#4CAF50',
        background: '#F5F5F5',
        border: '#E0E0E0',
        theme: 'Material' as const
      };
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      theme={colors.theme}
      fill={colors.fill}
      lineWidth={2}
      containerArea={{
        background: colors.background,
        border: { color: colors.border, width: 1 }
      }}
    />
  );
}

5. Color Meaning

Use colors purposefully to communicate meaning:

function SemanticColorSparkline() {
  const data: number[] = [3, 6, -2, 4, -1, 3, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      fill="#4CAF50"              // Green for positive
      negativePointColor="#F44336" // Red for negative
      highPointColor="#2196F3"     // Blue for highest
      lowPointColor="#FF9800"      // Orange for lowest
    />
  );
}

Summary

• Border: Use containerArea.border to add borders around sparkline
• Padding: Use padding object to control spacing (default: 5px all sides)
• Background: Use containerArea.background to set background colors
• Themes: Choose from Material, Fabric, Bootstrap, or Highcontrast
• Colors: Customize fill, lineWidth, opacity, and point colors
• Best Practices: Maintain consistency, ensure contrast, use adequate padding

Data Labels

Table of contents

• Overview
• Enabling Data Labels
• Show All Data Labels
• Show Start and End Labels
• Visibility Options
• Available Visibility Options
• Combining Multiple Visibility Options
• High and Low Points Only
• Negative Points Only
• Customizing Data Labels
• Customization Properties
• Custom Fill and Border
• Transparent Background with Border
• Different Styles for Different Points
• Formatting Data Label Text
• Format Placeholders
• Displaying X and Y Values
• Currency Format
• Percentage Format
• Unit Suffix
• Custom Prefix and Suffix
• Best Practices
• Summary

Overview

Data labels display values of data points directly on the sparkline, improving readability and providing immediate access to exact values. They are particularly useful when precise values matter more than just visual trends.

Key capabilities:

• Show values at specific points (All, Start, End, High, Low, Negative)
• Customize appearance (fill, border, opacity, text styles)
• Format text to display custom values and units
• Multiple visibility options for targeted display

Enabling Data Labels

To enable data labels, configure the dataLabelSettings property with the visible option.

Show All Data Labels

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

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

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

Show Start and End Labels

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

function SparklineWithStartEnd() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Start', 'End']
      }}
    />
  );
}

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

Visibility Options

The visible property accepts an array of visibility options. You can combine multiple options:

Available Visibility Options

Combining Multiple Visibility Options

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

function SparklineWithMultipleLabels() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['High', 'Low', 'Start', 'End']
      }}
    />
  );
}

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

High and Low Points Only

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

function HighLowLabels() {
  const data: number[] = [12, 18, 8, 25, 15, 10, 22];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['High', 'Low']
      }}
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
    />
  );
}
export default HighLowLabels;
ReactDOM.render(<HighLowLabels />, document.getElementById('charts'));

Negative Points Only

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

function NegativeLabels() {
  const data: number[] = [5, 8, -3, 10, -2, 7, -5, 12];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Negative']
      }}
      fill="#2196F3"
      negativePointColor="#F44336"
    />
  );
}

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

Customizing Data Labels

Data labels can be extensively customized to match your design requirements.

Customization Properties

Custom Fill and Border

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

function CustomStyledLabels() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['All'],
        fill: '#2196F3',
        opacity: 0.6,
        border: {
          color: '#1976D2',
          width: 2
        },
        textStyle: {
          color: '#FFFFFF',
          size: '12px',
          fontWeight: 'bold'
        }
      }}
    />
  );
}

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

Transparent Background with Border

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

function TransparentLabels() {
  const data = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['High', 'Low'],
        fill: 'transparent',
        border: {
          color: '#4CAF50',
          width: 1
        },
        textStyle: {
          color: '#4CAF50',
          size: '14px',
          fontWeight: 'bold'
        }
      }}
    />
  );
}

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

Different Styles for Different Points

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

function MultiColorLabels() {
  const data = [5, 8, 3, 10, 6, 2, 9];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Start', 'End', 'High', 'Low'],
        fill: '#FFFFFF',
        opacity: 0.9,
        border: {
          color: '#333333',
          width: 1
        },
        textStyle: {
          color: '#333333',
          size: '11px',
          fontWeight: 'bold'
        }
      }}
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
      startPointColor="#2196F3"
      endPointColor="#FF9800"
    />
  );
}

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

Formatting Data Label Text

The format property allows you to customize how values are displayed in data labels, including units, prefixes, and custom formats.

Format Placeholders

• ${x} - X-axis value
• ${y} - Y-axis value

Displaying X and Y Values

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

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

function FormattedLabels() {
  const data = [
    { month: 0, sales: 100 },
    { month: 1, sales: 150 },
    { month: 2, sales: 130 },
    { month: 3, sales: 180 },
    { month: 4, sales: 160 },
    { month: 5, sales: 200 }
  ];
  
  return (
    <SparklineComponent
      dataSource={data}
      xName="month"
      yName="sales"
      type="Line"
      height="150px"
      width="400px"
      dataLabelSettings={{
        visible: ['All'],
        format: 'M${month}: $${sales}K',
        fill: '#4A90E2',
        opacity: 0.8,
        textStyle: {
          color: '#FFFFFF',
          size: '10px'
        }
      }}
    />
  );
}

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

Output: Labels show as "M0: $100K", "M1: $150K", etc.

Currency Format

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

function CurrencyLabels() {
  const data = [
    { x: 'Mon', y: 3 },
    { x: 'Tue', y: 5 },
    { x: 'Wed', y: 2 },
    { x: 'Thu', y: 4 },
    { x: 'Fri', y: 6 },
  ];

  return (
    <SparklineComponent
      axisSettings={{
        minX: -1,
        maxX: 7,
        maxY: 7,
        minY: -1,
      }}
      dataSource={data}
      fill="blue"
      valueType="Category"
      xName="x"
      yName="y"
      type="Column"
      height="200px"
      width="500px"
      dataLabelSettings={{
        visible: ['All'],
        format: '$${y}',
        textStyle: {
          color: '#2E7D32',
          size: '12px',
          fontWeight: 'bold',
        },
      }}
    />
  );
}

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

Percentage Format

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

function PercentageLabels() {
  const data = [
    { x: 'Mon', y: 3 },
    { x: 'Tue', y: 5 },
    { x: 'Wed', y: 2 },
    { x: 'Thu', y: 4 },
    { x: 'Fri', y: 6 },
  ];

  return (
    <SparklineComponent
      axisSettings={{
        minX: -1,
        maxX: 7,
        maxY: 7,
        minY: -1,
      }}
      dataSource={data}
      fill="blue"
      valueType="Category"
      xName="x"
      yName="y"
      type="Pie"
      height="200px"
      width="500px"
      dataLabelSettings={{
        visible: ['All'],
        format: '${y}%',
        textStyle: {
          color: '#2E7D32',
          size: '12px',
          fontWeight: 'bold',
        },
      }}
    />
  );
}

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

Unit Suffix

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

function UnitLabels() {
  const data = [
    { x: 'Mon', y: 3 },
    { x: 'Tue', y: 5 },
    { x: 'Wed', y: 2 },
    { x: 'Thu', y: 4 },
    { x: 'Fri', y: 6 },
  ];

  return (
    <SparklineComponent
      axisSettings={{
        minX: -1,
        maxX: 7,
        maxY: 7,
        minY: -1,
      }}
      dataSource={data}
      fill="blue"
      valueType="Category"
      xName="x"
      yName="y"
      type="Area"
      height="200px"
      width="500px"
      dataLabelSettings={{
        visible: ['All'],
        format: '${y}°C',
        textStyle: {
          color: '#2E7D32',
          size: '12px',
          fontWeight: 'bold',
        },
      }}
    />
  );
}

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

Custom Prefix and Suffix

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

function CustomFormatLabels() {
  const data = [
    { x: 'Mon', y: 3 },
    { x: 'Tue', y: 5 },
    { x: 'Wed', y: 2 },
    { x: 'Thu', y: 4 },
    { x: 'Fri', y: 6 },
  ];

  return (
    <SparklineComponent
      axisSettings={{
        minX: -1,
        maxX: 7,
        maxY: 7,
        minY: -1,
      }}
      dataSource={data}
      fill="blue"
      valueType="Category"
      xName="x"
      yName="y"
      type="Column"
      height="200px"
      width="500px"
      dataLabelSettings={{
        visible: ['All'],
        format: '${x}: ${y} visitors',
        textStyle: {
          color: '#2E7D32',
          size: '12px',
          fontWeight: 'bold',
        },
      }}
    />
  );
}

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

Best Practices

1. Avoid Label Overcrowding

Don't show all labels if you have many data points - it creates visual clutter:

// ❌ Bad: Too many labels
function TooManyLabels() {
  const data = Array.from({ length: 50 }, (_, i) => Math.random() * 100);
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{ visible: ['All'] }} // Cluttered!
    />
  );
}

// ✅ Good: Selective labels
function SelectiveLabels() {
  const data = Array.from({ length: 50 }, (_, i) => Math.random() * 100);
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{ visible: ['High', 'Low', 'End'] }} // Clear!
    />
  );
}

2. Ensure Readability

Use sufficient contrast and appropriate font sizes:

function ReadableLabels() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      fill="#2196F3"
      dataLabelSettings={{
        visible: ['All'],
        fill: '#FFFFFF',
        border: { color: '#1976D2', width: 1 },
        textStyle: {
          color: '#1976D2',
          size: '12px',  // Large enough to read
          fontWeight: 'bold'
        }
      }}
    />
  );
}

3. Use Format for Context

Always add units or context to make values meaningful:

// ✅ Good: Clear units
<SparklineComponent
  dataSource={data}
  dataLabelSettings={{
    visible: ['All'],
    format: '${y} ms'  // Milliseconds
  }}
/>

// ❌ Bad: No context
<SparklineComponent
  dataSource={data}
  dataLabelSettings={{
    visible: ['All']  // Just numbers, unclear meaning
  }}
/>

4. Match Theme

Coordinate label colors with your sparkline theme:

function ThemeMatchedLabels() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      fill="#9C27B0"
      opacity={0.5}
      dataLabelSettings={{
        visible: ['High', 'Low'],
        fill: '#9C27B0',  // Match fill color
        opacity: 0.9,
        textStyle: {
          color: '#FFFFFF',
          size: '11px'
        }
      }}
    />
  );
}

5. Strategic Placement

Show labels only where they add value:

// ✅ Good: Labels at key points
function StrategicLabels() {
  const data: number[] = [100, 105, 98, 110, 108, 115, 120];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Start', 'End'],  // Show trend: start vs end
        format: '${y}%'
      }}
    />
  );
}

Summary

• Enable: Set visible in dataLabelSettings with options like All, Start, End, High, Low, Negative
• Customize: Use fill, border, opacity, and textStyle for appearance
• Format: Use format property with ${x} and ${y} placeholders for custom text
• Best Practices: Avoid overcrowding, ensure readability, add units, match theme
• Strategic Use: Show labels only where they provide value

Getting Started with React Sparkline

Table of Contents

• Overview
• Dependencies
• Installation and Configuration
• Creating a React Application
• Installing Syncfusion Sparkline Package
• Adding Sparkline to Your Project
• Module Injection
• Binding Data Source
• Changing Sparkline Type
• Enabling Tooltip
• Complete Working Example

Overview

The Syncfusion React Sparkline is a lightweight chart component designed to visualize data trends in minimal space without axes or coordinates. This guide walks through the complete setup process from installation to creating your first functional sparkline.

Key characteristics:

• Consumes minimal space
• Simple, highly condensed data visualization
• Easy to interpret at a glance
• Perfect for dashboards and grid integration
• Supports 5 types: Line, Column, Area, Win-Loss, and Pie

Dependencies

The Sparkline component requires the following minimum dependencies:

|-- @syncfusion/ej2-react-charts
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression

Note: Once you install @syncfusion/ej2-react-charts, all required dependencies will be installed automatically along with the main package.

Installation and Configuration

Creating a React Application

The recommended approach is to use Vite for React application setup, which provides:

• Faster development environment
• Smaller bundle sizes
• Optimized builds compared to create-react-app

TypeScript Environment

To set up a React application with TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

JavaScript Environment

To set up a React application with JavaScript:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Alternative: You can also use create-react-app if preferred, but Vite is recommended for better performance.

Installing Syncfusion Sparkline Package

All Syncfusion Essential JS 2 packages are published on the npmjs.com public registry.

To install the Sparkline package:

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

What the --save flag does: Instructs NPM to include the Sparkline package inside the dependencies section of your package.json file.

Adding Sparkline to Your Project

Basic Component Setup

Add the SparklineComponent to your src/App.tsx (TypeScript) or src/App.jsx (JavaScript):

TypeScript:

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

function App() {
  return (<SparklineComponent></SparklineComponent>);
}

export default App;

JavaScript:

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

function App() {
  return (<SparklineComponent></SparklineComponent>);
}

export default App;

Running the Application

Start the development server:

npm run dev

This command:

• Compiles your code
• Serves the application locally
• Opens it in the browser (typically at http://localhost:5173)

Current state: Since no data source has been specified, only an empty SVG element is rendered. The sparkline container exists but displays no shapes.

Module Injection

Sparkline components are segregated into individual feature-wise modules. To use specific features, inject their corresponding service modules.

Available Feature Services

Injecting Tooltip Module

To use tooltips, inject the SparklineTooltip module:

TypeScript:

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

function App() {
  return (
    <SparklineComponent>
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

export default App;

JavaScript:

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

function App() {
  return (
    <SparklineComponent>
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

export default App;

Important: Module injection must be done for each feature you want to use. Without injection, the feature will not be available.

Binding Data Source

The dataSource property enables data binding for the sparkline. It accepts a collection of values as input.

Simple Numeric Array

TypeScript:

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

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

export default App;

Object Array with xName and yName

For more complex data structures, use xName and yName to specify which properties to use:

TypeScript:

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

interface DataPoint {
  x: number;
  y: number;
}

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

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

JavaScript:

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

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

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

Changing Sparkline Type

The sparkline type can be configured using the type property. Supported types:

• Line - Continuous line chart (default)
• Column - Vertical bars
• Area - Filled area chart
• WinLoss - Binary outcome representation
• Pie - Circular proportional chart

Area Type Example

TypeScript:

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

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

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

JavaScript:

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="Area"
      height="150px"
      width="300px"
      fill="#b2cfff"
    />
  );
}

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

Column Type Example

<SparklineComponent
  dataSource={[3, 6, 4, 1, 3, 2, 5]}
  type="Column"
  height="150px"
  width="300px"
/>

Enabling Tooltip

The sparkline provides additional information through tooltips that appear when hovering over data points.

Basic Tooltip Configuration

To enable tooltips: 1. Set visible to true in tooltipSettings 2. Inject the SparklineTooltip module

TypeScript:

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

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

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

JavaScript:

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="Line"
      height="150px"
      width="300px"
      tooltipSettings={{
        visible: true,
        format: '${x} : ${y}'
      }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

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

Format placeholders:

• ${x} - X-axis value
• ${y} - Y-axis value

Complete Working Example

Here's a complete, production-ready example combining all the concepts:

TypeScript:

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

interface DataPoint {
  x: number;
  y: number;
}

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

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

JavaScript:

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

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

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

Key Takeaways

1. Installation: Use npm install @syncfusion/ej2-react-charts --save 2. Import: Import SparklineComponent from @syncfusion/ej2-react-charts 3. Data Binding: Use dataSource property with arrays or objects 4. Type Selection: Set type property to Line, Column, Area, WinLoss, or Pie 5. Module Injection: Inject SparklineTooltip for tooltip functionality 6. Sizing: Use height and width properties for dimensions 7. Tooltips: Configure with tooltipSettings object

Next Steps

• Learn about all 5 sparkline types and when to use each
• Explore appearance customization options (themes, colors, padding)
• Add data labels to highlight specific values
• Configure markers for start, end, high, low, and negative points
• Implement advanced features like range bands and axis customization

Markers

Table of contents

• Overview
• Adding Markers to Sparkline
• Show All Markers
• Show Start and End Markers
• Marker Visibility Options
• Available Visibility Options
• Combining Multiple Visibility Options
• High and Low Markers Only
• Negative Point Markers
• Special Point Markers
• High and Low Point Emphasis
• Start and End Point Markers
• All Special Points
• Customizing Markers
• Customization Properties
• Custom Size and Fill
• Markers with Border
• Large Highlighted Markers
• Semi-Transparent Markers
• Complete Examples
• Professional Dashboard Markers
• Minimal Line with End Marker
• Column with High/Low Markers
• Win-Loss with Markers
• Area Chart with Gradient Effect
• Best Practices
• Summary

Overview

Markers are visual indicators placed on data points in the sparkline to highlight specific values. They are particularly useful for emphasizing key points like start, end, high, low, and negative values.

Key capabilities:

• Add markers to specific points or all points
• Customize marker size, fill color, border, and opacity
• Highlight special points (start, end, high, low, negative)
• Combine markers with other features like data labels

Adding Markers to Sparkline

To add markers, configure the markerSettings property with the visible option.

Show All Markers

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

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

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

Show Start and End Markers

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

function SparklineWithStartEndMarkers() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      fill="#4A90E2"
      opacity={0.4}
      markerSettings={{
        visible: ['Start', 'End']
      }}
    />
  );
}

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

Marker Visibility Options

The visible property accepts an array of visibility options. You can combine multiple options to show markers at different points.

Available Visibility Options

Combining Multiple Visibility Options

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

function SparklineWithMultipleMarkers() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      markerSettings={{
        visible: ['High', 'Low', 'Start', 'End']
      }}
    />
  );
}

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

High and Low Markers Only

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

function HighLowMarkers() {
  const data: number[] = [12, 18, 8, 25, 15, 10, 22];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      fill="#2196F3"
      lineWidth={2}
      markerSettings={{
        visible: ['High', 'Low']
      }}
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
    />
  );
}

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

Negative Point Markers

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

function NegativeMarkers() {
  const data: number[] = [5, 8, -3, 10, -2, 7, -5, 12];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      fill="#2196F3"
      negativePointColor="#F44336"
      markerSettings={{
        visible: ['Negative']
      }}
    />
  );
}

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

Special Point Markers

Special point markers highlight specific data characteristics by applying different markers to start, end, high, low, and negative points.

High and Low Point Emphasis

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

function HighLowEmphasis() {
  const salesData = [15, 23, 18, 30, 28, 35, 32];
  
  return (
    <SparklineComponent
      dataSource={salesData}
      type="Line"
      height="150px"
      width="300px"
      fill="#4A90E2"
      lineWidth={2}
      markerSettings={{
        visible: ['High', 'Low'],
        size: 8
      }}
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
    />
  );
}

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

Start and End Point Markers

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

function StartEndMarkers() {
  const data = [
    { month: 'Jan', value: 100 },
    { month: 'Feb', value: 120 },
    { month: 'Mar', value: 110 },
    { month: 'Apr', value: 140 },
    { month: 'May', value: 130 },
    { month: 'Jun', value: 160 }
  ];
  
  return (
    <SparklineComponent
      dataSource={data}
      xName="month"
      yName="value"
      type="Area"
      height="150px"
      width="100%"
      fill="#9C27B0"
      opacity={0.5}
      markerSettings={{
        visible: ['Start', 'End'],
        size: 10
      }}
      startPointColor="#2196F3"
      endPointColor="#FF9800"
    />
  );
}

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

All Special Points

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

function AllSpecialPoints() {
  const data: number[] = [5, 12, -3, 18, 8, -5, 15, 10, 20];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="400px"
      fill="#673AB7"
      lineWidth={2}
      markerSettings={{
        visible: ['Start', 'End', 'High', 'Low', 'Negative'],
        size: 7
      }}
      startPointColor="#2196F3"
      endPointColor="#FF9800"
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
      negativePointColor="#E91E63"
    />
  );
}

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

Customizing Markers

Markers can be extensively customized to match your design requirements.

Customization Properties

Custom Size and Fill

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

function CustomMarkers() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      fill="#2196F3"
      lineWidth={2}
      markerSettings={{
        visible: ['All'],
        size: 8,
        fill: '#FF9800',
        opacity: 0.8
      }}
    />
  );
}

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

Markers with Border

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

function MarkersWithBorder() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      fill="#4CAF50"
      opacity={0.4}
      markerSettings={{
        visible: ['All'],
        size: 10,
        fill: '#4CAF50',
        border: {
          color: '#FFFFFF',
          width: 2
        }
      }}
    />
  );
}

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

Large Highlighted Markers

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

function LargeMarkers() {
  const data: number[] = [12, 18, 8, 25, 15, 10, 22];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      fill="#E91E63"
      lineWidth={3}
      markerSettings={{
        visible: ['High', 'Low'],
        size: 12,
        fill: '#FFFFFF',
        border: {
          color: '#E91E63',
          width: 3
        }
      }}
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
    />
  );
}

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

Semi-Transparent Markers

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

function TransparentMarkers() {
  const data: number[] = [5, 8, 3, 10, 6, 2, 9];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      fill="#2196F3"
      markerSettings={{
        visible: ['All'],
        size: 15,
        fill: '#FFC107',
        opacity: 0.6,
        border: {
          color: '#FF9800',
          width: 2
        }
      }}
    />
  );
}

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

Complete Examples

Professional Dashboard Markers

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

function DashboardSparkline() {
  const performanceData = [
    { week: 1, score: 65 },
    { week: 2, score: 72 },
    { week: 3, score: 68 },
    { week: 4, score: 80 },
    { week: 5, score: 85 },
    { week: 6, score: 78 },
    { week: 7, score: 92 }
  ];
  
  return (
    <div style={{ padding: '20px', background: '#F5F7FA', borderRadius: '8px' }}>
      <h3 style={{ margin: '0 0 10px 0', fontSize: '14px', color: '#333' }}>
        Weekly Performance Score
      </h3>
      <SparklineComponent
        dataSource={performanceData}
        xName="week"
        yName="score"
        type="Area"
        height="120px"
        width="100%"
        fill="#4A90E2"
        opacity={0.3}
        border={{ color: '#4A90E2', width: 2 }}
        markerSettings={{
          visible: ['All'],
          size: 6,
          fill: '#4A90E2',
          border: {
            color: '#FFFFFF',
            width: 2
          }
        }}
        highPointColor="#4CAF50"
        lowPointColor="#F44336"
      />
    </div>
  );
}

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

Minimal Line with End Marker

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

function MinimalEndMarker() {
  const data: number[] = [8, 12, 6, 15, 10, 4, 14];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="100px"
      width="250px"
      fill="#000000"
      lineWidth={2}
      markerSettings={{
        visible: ['End'],
        size: 8,
        fill: '#000000',
        border: {
          color: '#FFFFFF',
          width: 2
        }
      }}
    />
  );
}

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

Column with High/Low Markers

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

function ColumnHighLow() {
  const monthlyData: number[] = [35, 42, 28, 50, 38, 45, 32, 48, 40, 55, 36, 52];
  
  return (
    <SparklineComponent
      dataSource={monthlyData}
      type="Column"
      height="150px"
      width="100%"
      fill="#673AB7"
      markerSettings={{
        visible: ['High', 'Low'],
        size: 10,
        fill: '#FFFFFF',
        opacity: 1,
        border: {
          color: '#673AB7',
          width: 2
        }
      }}
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
    />
  );
}

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

Win-Loss with Markers

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

function WinLossWithMarkers() {
  const results: number[] = [5, -3, 8, -2, 0, 7, -5, 10, 3, -1];
  
  return (
    <SparklineComponent
      dataSource={results}
      type="WinLoss"
      height="120px"
      width="350px"
      fill="#4CAF50"
      negativePointColor="#F44336"
      tiePointColor="#FFC107"
      markerSettings={{
        visible: ['All'],
        size: 6,
        fill: '#333333',
        opacity: 0.7
      }}
    />
  );
}

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

Area Chart with Gradient Effect

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

function GradientAreaWithMarkers() {
  const trendData: number[] = [15, 22, 18, 28, 32, 25, 35, 30, 42];
  
  return (
    <SparklineComponent
      dataSource={trendData}
      type="Area"
      height="180px"
      width="100%"
      fill="#E91E63"
      opacity={0.5}
      border={{ color: '#C2185B', width: 2 }}
      markerSettings={{
        visible: ['Start', 'End', 'High'],
        size: 9,
        fill: '#FFFFFF',
        border: {
          color: '#C2185B',
          width: 2
        }
      }}
      highPointColor="#4CAF50"
      startPointColor="#2196F3"
      endPointColor="#FF9800"
      containerArea={{
        background: '#FCE4EC',
        border: { color: '#F06292', width: 1 }
      }}
      padding={{
        left: 15,
        right: 15,
        top: 15,
        bottom: 15
      }}
    />
  );
}

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

Best Practices

1. Strategic Marker Placement

Don't show markers for every point when you have many data points:

// ❌ Bad: Too many markers
function TooManyMarkers() {
  const data = Array.from({ length: 100 }, (_, i) => Math.random() * 100);
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      markerSettings={{ visible: ['All'] }} // Cluttered!
    />
  );
}

// ✅ Good: Strategic markers
function StrategicMarkers() {
  const data = Array.from({ length: 100 }, (_, i) => Math.random() * 100);
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      markerSettings={{ visible: ['High', 'Low', 'End'] }} // Clear!
    />
  );
}

2. Size Proportional to Sparkline

Choose marker sizes appropriate for your sparkline dimensions:

// Small sparkline = smaller markers
function SmallSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="60px"
      width="150px"
      markerSettings={{
        visible: ['High', 'Low'],
        size: 4  // Small markers for small sparkline
      }}
    />
  );
}

// Large sparkline = larger markers
function LargeSparkline() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="200px"
      width="500px"
      markerSettings={{
        visible: ['High', 'Low'],
        size: 12  // Larger markers for large sparkline
      }}
    />
  );
}

3. Contrast for Visibility

Ensure markers stand out against the sparkline:

// ✅ Good: High contrast
function HighContrastMarkers() {
  const data: number[] = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      fill="#2196F3"
      opacity={0.4}
      markerSettings={{
        visible: ['All'],
        size: 8,
        fill: '#2196F3',
        border: {
          color: '#FFFFFF',  // White border for visibility
          width: 2
        }
      }}
    />
  );
}

4. Combine with Point Colors

Use special point colors to enhance marker visibility:

function ColoredMarkers() {
  const data: number[] = [5, 12, 3, 18, 8, 2, 15];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      fill="#673AB7"
      lineWidth={2}
      markerSettings={{
        visible: ['Start', 'End', 'High', 'Low'],
        size: 8,
        fill: '#FFFFFF',
        border: { width: 2 }  // Border color from point colors
      }}
      startPointColor="#2196F3"
      endPointColor="#FF9800"
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
    />
  );
}

5. Accessibility Considerations

Ensure markers are visible for users with color vision deficiencies:

function AccessibleMarkers() {
  const data: number[] = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      fill="#0066CC"
      lineWidth={3}
      markerSettings={{
        visible: ['All'],
        size: 10,
        fill: '#FFFFFF',
        border: {
          color: '#0066CC',
          width: 3  // Thick border for visibility
        }
      }}
    />
  );
}

6. Combine Markers with Data Labels

For maximum clarity, combine markers with data labels:

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

function MarkersWithLabels() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      fill="#4A90E2"
      opacity={0.4}
      markerSettings={{
        visible: ['High', 'Low'],
        size: 8,
        fill: '#4A90E2',
        border: { color: '#FFFFFF', width: 2 }
      }}
      dataLabelSettings={{
        visible: ['High', 'Low'],
        fill: '#FFFFFF',
        border: { color: '#4A90E2', width: 1 },
        textStyle: { color: '#4A90E2', size: '11px', fontWeight: 'bold' }
      }}
      highPointColor="#4CAF50"
      lowPointColor="#F44336"
    />
  );
}

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

Summary

• Enable: Set visible in markerSettings with options like All, Start, End, High, Low, Negative
• Customize: Use size, fill, opacity, border for appearance
• Special Points: Combine with point colors (highPointColor, lowPointColor, etc.)
• Best Practices: Strategic placement, proportional sizing, high contrast, accessibility
• Combinations: Works well with data labels, tooltips, and other features