Chart and Visualization

RevoGrid supports a variety of visual renderers and chart types, enabling users to present data in visually engaging and intuitive formats. Below is a description of each available feature:

To display and edit multiple ranges within a cell, see the Timeline Segment Editor.

To create standalone charts that follow grid sorting, filtering, edits, and selected regions, see Charts from Grid Data.

Chart Configuration API

Each chart type supports the following common configuration options:

interface ChartConfig {
  name: string; // Column name
  prop: string; // Data property name
  minValue?: number; // Minimum value for normalization
  maxValue?: number; // Maximum value for normalization
  thresholds?: {
    // Visual thresholds for value ranges
    value: number | string | boolean; // Threshold value
    className: string; // CSS class for styling
  }[];
  progress?: (config: { model: any; data: any; prop: string }) => number; // Custom progress calculation
}

Progress Line Renderer

Displays a horizontal progress bar within a cell to visually represent a value’s progression relative to a maximum limit. Useful for showing percentages or task completion statuses.

Configuration

{
  name: 'Linear',
  prop: 'num',
  minValue: 0,
  maxValue: 100,
  thresholds: [
    { value: 90, className: 'high' },
    { value: 50, className: 'medium' },
    { value: 0, className: 'low' }
  ],
  cellTemplate: progressLineRenderer,
  // Optional: Custom progress calculation
  progress: (config) => {
    // Calculate progress based on multiple fields
    const completed = config.model.completedTasks || 0;
    const total = config.model.totalTasks || 1;
    return (completed / total) * 100;
  }
}

Progress Line with Value Renderer

Combines the progress line visualization with a numerical value label, offering both a visual and textual representation of the data.

Configuration

{
  name: 'Linear with Value',
  prop: 'num',
  minValue: 0,
  maxValue: 40,
  thresholds: [
    { value: 90, className: 'high' },
    { value: 30, className: 'medium' },
    { value: 0, className: 'low' }
  ],
  cellTemplate: progressLineWithValueRenderer,
  // Optional: Custom progress calculation
  progress: (config) => {
    // Calculate progress based on multiple fields
    const completed = config.model.completedTasks || 0;
    const total = config.model.totalTasks || 1;
    return (completed / total) * 100;
  }
}

Circular Progress Renderer

Displays a circular progress bar within a cell to visually represent a value’s progression relative to a maximum limit. Useful for showing percentages or task completion statuses.

Configuration

{
  name: 'Circular Progress',
  prop: 'num',
  cellTemplate: circularProgressRenderer
}

Sparkline Renderer

Renders mini inline charts directly within cells to display trends or patterns in data over time, ideal for quick overviews of performance metrics.

Configuration

{
  name: 'Sparkline',
  prop: 'trend',
  minValue: 0,
  maxValue: 100,
  cellTemplate: sparklineRenderer
}

Bar Chart Renderer

Generates horizontal or vertical bar charts inside cells to compare values across categories, making it perfect for categorical or segmented data.

Configuration

{
  name: 'Bars',
  prop: 'trend',
  minValue: 0,
  maxValue: 100,
  cellTemplate: barChartRenderer
}

Rating Star Renderer

Renders star icons to represent ratings, making it ideal for reviews or score-based data.

Configuration

{
  name: 'Rating',
  prop: 'rating',
  maxStars: 5,
  cellTemplate: ratingStarRenderer
}

Badge Renderer

Displays badges with customizable fill and optional text colors. Data Grid Formatting can override the text color.

Configuration

{
  name: 'Badge',
  prop: 'status',
  badgeStyles: {
    Active: { backgroundColor: '#008620', color: '#fff' },
    Pending: { backgroundColor: '#ff9800', color: '#fff' },
    Completed: { backgroundColor: '#0068ba', color: '#fff' },
    Failed: { backgroundColor: '#f44336', color: '#fff' }
  },
  cellTemplate: badgeRenderer
}

Change Renderer

Highlights changes in data with visual cues such as arrows or color-coded indicators, helping users track trends or differences over time.

Configuration

{
  name: 'Change',
  prop: 'num',
  cellTemplate: changeRenderer
}

Thumbs Renderer

Displays thumbs-up or thumbs-down icons to indicate approvals, votes, or boolean-like states in a simple and user-friendly format.

Configuration

{
  name: 'Thumbs',
  prop: 'thumbs',
  cellTemplate: thumbsRenderer
}

Pie Chart Renderer

Renders pie charts inside cells to display proportional data distribution, ideal for visualizing parts of a whole within a dataset.

Configuration

{
  name: 'Pie',
  prop: 'trend',
  cellTemplate: pieChartRenderer
}