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:

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
}

Timeline Renderer

Visualizes timelines within cells, enabling users to see task durations or event periods in an intuitive linear format.

Configuration

{
  name: 'Timeline',
  prop: 'timeline',
  timelineRange: { start: 0, end: 100 },
  cellTemplate: timelineRenderer
}

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 colors and text to highlight categorical or status-based data.

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
}