Chart and Visualization Features

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:

1
interface ChartConfig {
2
  name: string;           // Column name
3
  prop: string;          // Data property name
4
  minValue?: number;     // Minimum value for normalization
5
  maxValue?: number;     // Maximum value for normalization
6
  thresholds?: {         // Visual thresholds for value ranges
7
    value: number | string | boolean;  // Threshold value
8
    className: string;   // CSS class for styling
9
  }[];
10
}

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

1
{
2
  name: 'Linear',
3
  prop: 'num',
4
  minValue: 0,
5
  maxValue: 100,
6
  thresholds: [
7
    { value: 90, className: 'high' },
8
    { value: 50, className: 'medium' },
9
    { value: 0, className: 'low' }
10
  ],
11
  cellTemplate: progressLineRenderer
12
}

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

1
{
2
  name: 'Linear with Value',
3
  prop: 'num',
4
  minValue: 0,
5
  maxValue: 40,
6
  thresholds: [
7
    { value: 90, className: 'high' },
8
    { value: 30, className: 'medium' },
9
    { value: 0, className: 'low' }
10
  ],
11
  cellTemplate: progressLineWithValueRenderer
12
}

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

1
{
2
  name: 'Sparkline',
3
  prop: 'trend',
4
  minValue: 0,
5
  maxValue: 100,
6
  cellTemplate: sparklineRenderer
7
}

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

1
{
2
  name: 'Bars',
3
  prop: 'trend',
4
  minValue: 0,
5
  maxValue: 100,
6
  cellTemplate: barChartRenderer
7
}

Timeline Renderer

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

Configuration

1
{
2
  name: 'Timeline',
3
  prop: 'timeline',
4
  timelineRange: { start: 0, end: 100 },
5
  cellTemplate: timelineRenderer
6
}

Rating Star Renderer

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

Configuration

1
{
2
  name: 'Rating',
3
  prop: 'rating',
4
  maxStars: 5,
5
  cellTemplate: ratingStarRenderer
6
}

Badge Renderer

Displays badges with customizable colors and text to highlight categorical or status-based data.

Configuration

1
{
2
  name: 'Badge',
3
  prop: 'status',
4
  badgeStyles: {
5
    Active: { backgroundColor: '#008620', color: '#fff' },
6
    Pending: { backgroundColor: '#ff9800', color: '#fff' },
7
    Completed: { backgroundColor: '#0068ba', color: '#fff' },
8
    Failed: { backgroundColor: '#f44336', color: '#fff' }
9
  },
10
  cellTemplate: badgeRenderer
11
}

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

1
{
2
  name: 'Change',
3
  prop: 'num',
4
  cellTemplate: changeRenderer
5
}

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

1
{
2
  name: 'Thumbs',
3
  prop: 'thumbs',
4
  cellTemplate: thumbsRenderer
5
}

Pie Chart Renderer

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

Configuration

1
{
2
  name: 'Pie',
3
  prop: 'trend',
4
  cellTemplate: pieChartRenderer
5
}

Source code

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
import { columnWithCharts } from './columns';
3
import { currentTheme } from '../composables/useRandomData';
4
import { makeCharts } from '../composables/makeData';
5

6
defineCustomElements();
7

8
const { isDark } = currentTheme();
9

10
export function load(parentSelector: string, type: keyof typeof columnWithCharts) {
11
  const grid = document.createElement('revo-grid');
12
  grid.className = 'rounded-lg overflow-hidden';
13
  grid.range = true;
14
  grid.source = makeCharts(100);
15

16
  grid.columns = [columnWithCharts[type]];
17

18
  grid.plugins = [];
19
  grid.additionalData = {
20
    stretch: 'all',
21
  };
22
  grid.theme = isDark() ? 'darkCompact' : 'compact';
23
  grid.hideAttribution = true;
24
  document.querySelector(parentSelector)?.appendChild(grid);
25
}

1
<template>
2
  <VGrid
3
    :key="type"
4
    class="rounded-lg overflow-hidden"
5
    range
6
    :theme="isDark ? 'darkCompact' : 'compact'"
7
    :columns="columns"
8
    :source="rows"
9
    hide-attribution
10
    :additionalData="additionalData"
11
    :plugins="plugins"
12
    resize
13
  />
14
</template>
15

16
<script setup lang="ts">
17
import { ref, type PropType } from 'vue';
18
import { currentThemeVue } from '../composables/useRandomData';
19
import { type ColumnRegular, type DataType, VGrid } from '@revolist/vue3-datagrid';
20
import {
21
  ColumnStretchPlugin,
22
} from '@revolist/revogrid-pro';
23

24
import { columnWithCharts } from './columns';
25
const { isDark } = currentThemeVue();
26

27
const props = defineProps({
28
  rows: {
29
    type: Array as PropType<DataType[]>,
30
    default: () => [],
31
    required: false
32
  },
33
  type: {
34
    type: String as PropType<keyof typeof columnWithCharts>,
35
    default: 'Linear' as keyof typeof columnWithCharts,
36
    required: false,
37
  },
38
});
39

40
const columns = ref<ColumnRegular[]>([
41
  columnWithCharts[props.type],
42
]);
43

44
const plugins = [ColumnStretchPlugin];
45
const additionalData = {
46
  stretch: 'all',
47
};
48

49
</script>

1
import { useState, useMemo, useRef } from 'react';
2
import { RevoGrid, type DataType, type ColumnRegular } from '@revolist/react-datagrid';
3
import { currentTheme } from '../composables/useRandomData';
4
import { makeCharts } from '../composables/makeData';
5
import { columnWithCharts } from './columns';
6
import React from 'react';
7

8
const { isDark } = currentTheme();
9

10
const Charts = ({ type = 'Linear' }) => {
11
  const gridRef = useRef<HTMLRevoGridElement>(null);
12
  const [source] = useState<DataType[]>(makeCharts(100));
13

14
  const columns: ColumnRegular[] = useMemo(
15
    () => [columnWithCharts[type]],
16
    []
17
  );
18

19
  const theme = isDark() ? 'darkCompact' : 'compact';
20

21
  return (
22
    <RevoGrid
23
      ref={gridRef}
24
      className="rounded-lg overflow-hidden"
25
      range
26
      columns={columns}
27
      source={source}
28
      hide-attribution
29
      theme={theme}
30
      resize
31
    />
32
  );
33
}
34

35
export default Charts;

1
// @ts-ignore
2
import { Component, ViewEncapsulation, Input } from '@angular/core';
3
import { RevoGrid } from '@revolist/angular-datagrid';
4
import { columnWithCharts } from './columns';
5
import { currentTheme } from '../composables/useRandomData';
6
import { makeCharts } from '../composables/makeData';
7

8
@Component({
9
  selector: 'charts-grid',
10
  standalone: true,
11
  imports: [RevoGrid],
12
  template: `
13
    <revo-grid
14
      class="rounded-lg overflow-hidden"
15
      [range]="true"
16
      [theme]="theme"
17
      [columns]="columns"
18
      [source]="rows"
19
      [hideAttribution]="true"
20
      [resize]="true"
21
      style="height: 400px; width: 800px"
22
    ></revo-grid>
23
  `,
24
  encapsulation: ViewEncapsulation.None,
25
})
26
export class ChartsGridComponent {
27
  @Input() type: keyof typeof columnWithCharts = 'Linear';  // Default to 'Linear'
28
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
29

30
  columns = [
31
    columnWithCharts[this.type],
32
  ];
33

34
  rows = makeCharts(100);
35
}

1
import type { ColumnRegular } from '@revolist/revogrid';
2
import {
3
  badgeRenderer,
4
  barChartRenderer,
5
  progressLineRenderer,
6
  progressLineWithValueRenderer,
7
  ratingStarRenderer,
8
  sparklineRenderer,
9
  timelineRenderer,
10
  changeRenderer,
11
  thumbsRenderer,
12
  pieChartRenderer,
13
} from '@revolist/revogrid-pro';
14

15
export const columnWithCharts: Record<
16
  'Linear' | 'LinearWithValue' | 'Sparkline' | 'Bars' | 'Timeline' | 'Rating' | 'Badge' | 'Change' | 'Thumbs' | 'Pie',
17
  ColumnRegular
18
> = {
19
  Linear: {
20
    name: 'Linear',
21
    prop: 'num',
22
    minValue: 0,
23
    maxValue: 100,
24
    thresholds: [
25
      { value: 90, className: 'high' },
26
      { value: 50, className: 'medium' },
27
      { value: 0, className: 'low' },
28
    ],
29
    cellTemplate: progressLineRenderer,
30
  },
31

32
  LinearWithValue: {
33
    name: 'Linear with Value',
34
    prop: 'num',
35
    minValue: 0,
36
    maxValue: 40,
37
    thresholds: [
38
      { value: 90, className: 'high' },
39
      { value: 30, className: 'medium' },
40
      { value: 0, className: 'low' },
41
    ],
42
    cellTemplate: progressLineWithValueRenderer,
43
  },
44

45
  Sparkline: {
46
    name: 'Sparkline',
47
    prop: 'trend',
48
    minValue: 0, // Optional: Provide min value for normalization
49
    maxValue: 100, // Optional: Provide max value for normalization
50
    cellTemplate: sparklineRenderer,
51
  },
52

53
  Bars: {
54
    name: 'Bars',
55
    prop: 'trend',
56
    minValue: 0, // Optional: Provide min value for normalization
57
    maxValue: 100, // Optional: Provide max value for normalization
58
    cellTemplate: barChartRenderer,
59
  },
60
  Timeline: {
61
    name: 'Timeline',
62
    prop: 'timeline',
63
    cellTemplate: timelineRenderer,
64
    timelineRange: { start: 0, end: 100 }, // Define the total timeline range
65
  },
66
  Rating: {
67
    name: 'Rating',
68
    prop: 'rating',
69
    cellTemplate: ratingStarRenderer,
70
    maxStars: 5,
71
  },
72
  Badge: {
73
    name: 'Badge',
74
    prop: 'status',
75
    cellTemplate: badgeRenderer,
76
    badgeStyles: {
77
      Active: { backgroundColor: '#008620', color: '#fff' },
78
      Pending: { backgroundColor: '#ff9800', color: '#fff' },
79
      Completed: { backgroundColor: '#0068ba', color: '#fff' },
80
      Failed: { backgroundColor: '#f44336', color: '#fff' },
81
    },
82
  },
83
  Change: {
84
    name: 'Change',
85
    prop: 'num',
86
    cellTemplate: changeRenderer,
87
  },
88
  Thumbs: {
89
    name: 'Thumbs',
90
    prop: 'thumbs',
91
    cellTemplate: thumbsRenderer,
92
  },
93
  Pie: {
94
    name: 'Pie',
95
    prop: 'trend',
96
    cellTemplate: pieChartRenderer,
97
  },
98
};

1
[
2
  {
3
    "num": 102,
4
    "trend": [
5
      63,
6
      81,
7
      90,
8
      9,
9
      13
10
    ],
11
    "status": "Completed",
12
    "rating": 1,
13
    "timeline": [
14
      {
15
        "start": 3,
16
        "end": 18,
17
        "label": "coniecto solutio"
18
      },
19
      {
20
        "start": 35,
21
        "end": 58,
22
        "label": "vesper spectaculum"
23
      }
24
    ]
25
  }
26
]