# Chart and Visualization
URL: https://pro.rv-grid.com/guides/cells/charts/
Source: src/content/docs/guides/cells/charts.mdx
Description: Discover the wide range of charts and visual renderers available in RevoGrid.
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:

```typescript
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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  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
```typescript
{
  name: 'Pie',
  prop: 'trend',
  cellTemplate: pieChartRenderer
}
```
