Charts

@revolist/charts renders interactive charts in an ordinary HTML container. It includes 68 built-in chart types, themes, selection, navigation and exports. Use it with JavaScript or your preferred framework, independently of Pivot, RevoGrid and Pro. No grid stylesheet or custom element registration is required.

Start here

Guide	What you will learn
Installation	Package access, installation, imports and your first chart.
Framework components	React, Vue, Angular and Svelte components with reactive configuration.
Analysis	Moving averages, regression, period comparisons, forecasts, computed references and comparison charts.
Data & Configuration	Row mapping, analytical datasets, bindings, styling, updates, selection, exports and cleanup.

A simple chart, live

Switch between line and column charts, load forecast data, select points and download CSV or SVG. These two chart types share one controller and your data.

Loading chart…

Explore the live catalog

Choose any of the 68 built-in chart types or the three optional geographic examples. Each example uses a valid dataset for its requirements. For native charts, open View sample dataset and bindings to inspect the input, including specialized channels or distributions. Geographic examples link to their complete provider and rendering code. The catalog includes all renderers; your application can import just one type instead.

Explore chart types

Show change and trends across an ordered axis.

Loading chart…

Independent import: @revolist/charts/line

View sample dataset and bindings

{
  "dataset": {
    "revision": 0,
    "source": "client",
    "categories": [
      {
        "id": "preview-category-0",
        "label": "Jan",
        "path": [
          "Jan"
        ],
        "labels": [
          "Jan"
        ],
        "depth": 1,
        "kind": "leaf"
      },
      {
        "id": "preview-category-1",
        "label": "Feb",
        "path": [
          "Feb"
        ],
        "labels": [
          "Feb"
        ],
        "depth": 1,
        "kind": "leaf"
      },
      {
        "id": "preview-category-2",
        "label": "Mar",
        "path": [
          "Mar"
        ],
        "labels": [
          "Mar"
        ],
        "depth": 1,
        "kind": "leaf"
      },
      {
        "id": "preview-category-3",
        "label": "Apr",
        "path": [
          "Apr"
        ],
        "labels": [
          "Apr"
        ],
        "depth": 1,
        "kind": "leaf"
      }
    ],
    "series": [
      {
        "id": "preview-series-0",
        "label": "Current",
        "columnPath": [
          "Current"
        ],
        "labels": [
          "Current"
        ],
        "kind": "leaf",
        "prop": "preview-0"
      },
      {
        "id": "preview-series-1",
        "label": "Previous",
        "columnPath": [
          "Previous"
        ],
        "labels": [
          "Previous"
        ],
        "kind": "leaf",
        "prop": "preview-1"
      }
    ],
    "values": [
      [
        18,
        29
      ],
      [
        44,
        27
      ],
      [
        31,
        45
      ],
      [
        62,
        50
      ]
    ],
    "analyticalFrame": {
      "fields": [
        {
          "id": "pivot:category",
          "label": "pivot:category",
          "role": "dimension",
          "semanticType": "category"
        },
        {
          "id": "pivot:series",
          "label": "pivot:series",
          "role": "dimension",
          "semanticType": "category"
        },
        {
          "id": "preview-series-0",
          "label": "Current",
          "role": "measure",
          "semanticType": "number",
          "sourceField": "preview-0"
        },
        {
          "id": "preview-series-1",
          "label": "Previous",
          "role": "measure",
          "semanticType": "number",
          "sourceField": "preview-1"
        }
      ],
      "observations": [
        {
          "id": "[\"preview-category-0\",\"preview-series-0\"]",
          "dimensions": {
            "pivot:category": {
              "value": "Jan",
              "label": "Jan",
              "path": [
                "Jan"
              ],
              "labels": [
                "Jan"
              ]
            },
            "pivot:series": {
              "value": "Current",
              "label": "Current",
              "path": [
                "Current"
              ],
              "labels": [
                "Current"
              ]
            }
          },
          "measures": {
            "preview-series-0": 18
          }
        },
        {
          "id": "[\"preview-category-0\",\"preview-series-1\"]",
          "dimensions": {
            "pivot:category": {
              "value": "Jan",
              "label": "Jan",
              "path": [
                "Jan"
              ],
              "labels": [
                "Jan"
              ]
            },
            "pivot:series": {
              "value": "Previous",
              "label": "Previous",
              "path": [
                "Previous"
              ],
              "labels": [
                "Previous"
              ]
            }
          },
          "measures": {
            "preview-series-1": 29
          }
        },
        {
          "id": "[\"preview-category-1\",\"preview-series-0\"]",
          "dimensions": {
            "pivot:category": {
              "value": "Feb",
              "label": "Feb",
              "path": [
                "Feb"
              ],
              "labels": [
                "Feb"
              ]
            },
            "pivot:series": {
              "value": "Current",
              "label": "Current",
              "path": [
                "Current"
              ],
              "labels": [
                "Current"
              ]
            }
          },
          "measures": {
            "preview-series-0": 44
          }
        },
        {
          "id": "[\"preview-category-1\",\"preview-series-1\"]",
          "dimensions": {
            "pivot:category": {
              "value": "Feb",
              "label": "Feb",
              "path": [
                "Feb"
              ],
              "labels": [
                "Feb"
              ]
            },
            "pivot:series": {
              "value": "Previous",
              "label": "Previous",
              "path": [
                "Previous"
              ],
              "labels": [
                "Previous"
              ]
            }
          },
          "measures": {
            "preview-series-1": 27
          }
        },
        {
          "id": "[\"preview-category-2\",\"preview-series-0\"]",
          "dimensions": {
            "pivot:category": {
              "value": "Mar",
              "label": "Mar",
              "path": [
                "Mar"
              ],
              "labels": [
                "Mar"
              ]
            },
            "pivot:series": {
              "value": "Current",
              "label": "Current",
              "path": [
                "Current"
              ],
              "labels": [
                "Current"
              ]
            }
          },
          "measures": {
            "preview-series-0": 31
          }
        },
        {
          "id": "[\"preview-category-2\",\"preview-series-1\"]",
          "dimensions": {
            "pivot:category": {
              "value": "Mar",
              "label": "Mar",
              "path": [
                "Mar"
              ],
              "labels": [
                "Mar"
              ]
            },
            "pivot:series": {
              "value": "Previous",
              "label": "Previous",
              "path": [
                "Previous"
              ],
              "labels": [
                "Previous"
              ]
            }
          },
          "measures": {
            "preview-series-1": 45
          }
        },
        {
          "id": "[\"preview-category-3\",\"preview-series-0\"]",
          "dimensions": {
            "pivot:category": {
              "value": "Apr",
              "label": "Apr",
              "path": [
                "Apr"
              ],
              "labels": [
                "Apr"
              ]
            },
            "pivot:series": {
              "value": "Current",
              "label": "Current",
              "path": [
                "Current"
              ],
              "labels": [
                "Current"
              ]
            }
          },
          "measures": {
            "preview-series-0": 62
          }
        },
        {
          "id": "[\"preview-category-3\",\"preview-series-1\"]",
          "dimensions": {
            "pivot:category": {
              "value": "Apr",
              "label": "Apr",
              "path": [
                "Apr"
              ],
              "labels": [
                "Apr"
              ]
            },
            "pivot:series": {
              "value": "Previous",
              "label": "Previous",
              "path": [
                "Previous"
              ],
              "labels": [
                "Previous"
              ]
            }
          },
          "measures": {
            "preview-series-1": 50
          }
        }
      ],
      "matrixCells": [
        {
          "categoryId": "preview-category-0",
          "seriesId": "preview-series-0",
          "observationId": "[\"preview-category-0\",\"preview-series-0\"]",
          "measureFieldId": "preview-series-0"
        },
        {
          "categoryId": "preview-category-0",
          "seriesId": "preview-series-1",
          "observationId": "[\"preview-category-0\",\"preview-series-1\"]",
          "measureFieldId": "preview-series-1"
        },
        {
          "categoryId": "preview-category-1",
          "seriesId": "preview-series-0",
          "observationId": "[\"preview-category-1\",\"preview-series-0\"]",
          "measureFieldId": "preview-series-0"
        },
        {
          "categoryId": "preview-category-1",
          "seriesId": "preview-series-1",
          "observationId": "[\"preview-category-1\",\"preview-series-1\"]",
          "measureFieldId": "preview-series-1"
        },
        {
          "categoryId": "preview-category-2",
          "seriesId": "preview-series-0",
          "observationId": "[\"preview-category-2\",\"preview-series-0\"]",
          "measureFieldId": "preview-series-0"
        },
        {
          "categoryId": "preview-category-2",
          "seriesId": "preview-series-1",
          "observationId": "[\"preview-category-2\",\"preview-series-1\"]",
          "measureFieldId": "preview-series-1"
        },
        {
          "categoryId": "preview-category-3",
          "seriesId": "preview-series-0",
          "observationId": "[\"preview-category-3\",\"preview-series-0\"]",
          "measureFieldId": "preview-series-0"
        },
        {
          "categoryId": "preview-category-3",
          "seriesId": "preview-series-1",
          "observationId": "[\"preview-category-3\",\"preview-series-1\"]",
          "measureFieldId": "preview-series-1"
        }
      ]
    }
  },
  "bindings": {}
}

Common chart tools

Explore the shared chart tools: drawing and annotations, navigation, interaction, linking, exports and configuration. Each tool has its own guide and a live example. These tools belong to Charts; Pivot adds its query, grid filtering and editor integration.

Available chart types

The catalog below is generated from the package’s chart definitions. Each row links to a dedicated guide with a live interactive example, interpretation notes, data requirements, supported options and a complete example. It also lists the independent import subpath. For example, /line means @revolist/charts/line, which exports lineChart and createLineChart.

Column charts

Chart	When to use it	Import subpath
Grouped column	Compare values side by side across categories.	`/grouped-column`
Stacked column	Compare totals and their contributing series.	`/stacked-column`
100% stacked column	Compare percentage composition across categories.	`/normalized-column`
Range column	Compare lower-to-upper intervals as vertical columns.	`/range-column`
Lollipop	Compare single values with compact stems and endpoints.	`/lollipop`

Bar charts

Chart	When to use it	Import subpath
Grouped bar	Compare categories with horizontal bars.	`/grouped-bar`
Stacked bar	Compare horizontal totals and their composition.	`/stacked-bar`
100% stacked bar	Compare percentage composition horizontally.	`/normalized-bar`
Range bar	Compare lower-to-upper intervals as horizontal bars.	`/range-bar`

Line charts

Chart	When to use it	Import subpath
Line	Show change and trends across an ordered axis.	`/line`
Smooth line	Show trends with a smooth curve through each value.	`/smooth-line`
Stepped line	Show values that remain constant between categories.	`/stepped-line`
Small multiples	Compare series in aligned panels with independent scales.	`/small-multiples`
Annotated time series	Highlight notable points along an ordered time trend.	`/annotated-time-series`

Area charts

Chart	When to use it	Import subpath
Area	Emphasize the magnitude of change over an ordered axis.	`/area`
Stepped area	Emphasize stepwise changes with a filled baseline.	`/stepped-area`
Stacked area	Show how multiple series contribute to a changing total.	`/stacked-area`
100% stacked area	Show percentage contribution over an ordered axis.	`/normalized-area`
Range area	Show how a lower-to-upper interval changes over categories.	`/range-area`
Confidence band	Show an uncertainty band between lower and upper bounds.	`/confidence-band`

Part-to-whole charts

Chart	When to use it	Import subpath
Pie	Show the share of a single series as slices.	`/pie`
Donut	Show part-to-whole values in one or more rings.	`/donut`
Semi-donut	Show part-to-whole values across a compact semicircle.	`/semi-donut`
Waffle	Compare part-to-whole values on a compact 100-cell grid.	`/waffle`

Hierarchies

Chart	When to use it	Import subpath
Treemap	Compare hierarchical values as proportional nested tiles.	`/treemap`
Sunburst	Explore the current hierarchy level as proportional radial sectors.	`/sunburst`
Icicle	Explore hierarchy through proportional stacked rectangles.	`/icicle`
Circle packing	Explore hierarchy through proportional nested circles.	`/circle-packing`
Organization chart	Show connected parent and child cards.	`/organization`

Relationships

Chart	When to use it	Import subpath
Scatter	Compare two measures as points across categories.	`/scatter`
Bubble	Compare two measures while bubble area represents a third measure.	`/bubble`
Density scatter	Aggregate dense X/Y observations into spatial density.	`/density-scatter`
Connected scatter	Show the ordered path between paired X/Y observations.	`/connected-scatter`
Quadrant chart	Compare observations across four decision regions.	`/quadrant`

Combination charts

Chart	When to use it	Import subpath
Column and line	Compare one column series with one or more line series.	`/column-line`
Area and line	Compare one filled area series with one or more line series.	`/area-line`

Statistics and intervals

Chart	When to use it	Import subpath
Error interval	Compare a center value with its lower and upper bounds.	`/error-interval`
Box plot	Summarize a distribution with quartiles, whiskers, and outliers.	`/box-plot`
Violin plot	Compare distribution shape and concentration across categories.	`/violin`
Range and interval	Compare minimum, maximum, and mean values by category.	`/range-interval`

Time and faceting

Chart	When to use it	Import subpath
Waterfall	Show how positive and negative changes build to a result.	`/waterfall`
Timeline range	Compare start-to-end intervals across categories.	`/timeline-range`

KPIs and progress

Chart	When to use it	Import subpath
Bullet	Compare actual values with explicit targets.	`/bullet`
Gauge	Compare an actual value with its target on a radial scale.	`/gauge`
KPI value	Summarize actual, target, and variance in a compact KPI card.	`/kpi`
Progress gauge	Show progress toward a target on a radial track.	`/progress-gauge`
Linear gauge	Compare a value with an explicit linear scale and target.	`/linear-gauge`

Polar and radar charts

Chart	When to use it	Import subpath
Rose	Compare category magnitude through radial sector length.	`/rose`
Radar line	Compare multiple series across circular category axes.	`/radar-line`
Radar area	Compare filled multivariate profiles across circular axes.	`/radar-area`
Polar column	Compare grouped values as radial columns.	`/polar-column`
Stacked polar column	Compare radial totals and their contributing series.	`/stacked-polar-column`
100% stacked polar column	Compare percentage composition in radial columns.	`/normalized-polar-column`
Radial bar	Show one series as progress around radial tracks.	`/radial-bar`
Multi-ring radial bar	Compare multiple series as concentric radial tracks.	`/multi-ring-radial-bar`
Radial column	Compare rectangular columns arranged around a polar axis.	`/radial-column`

Distributions

Chart	When to use it	Import subpath
Histogram	Summarize one measure in deterministic numeric bins.	`/histogram`
Strip and dot plot	Show the distribution of individual values along one axis.	`/strip-dot`

Heatmaps

Chart	When to use it	Import subpath
Heatmap	Compare category and series intersections through color intensity.	`/heatmap`
Calendar heatmap	Show one daily measure across calendar weeks.	`/calendar-heatmap`

Processes

Chart	When to use it	Import subpath
Funnel	Show sequential stages that narrow toward an outcome.	`/funnel`
Pyramid	Compare staged values through centered proportional layers.	`/pyramid`
Cone funnel	Compare stage lines and the transitions between them.	`/cone-funnel`

Flows

Chart	When to use it	Import subpath
Sankey	Trace weighted flow from categories to connected series.	`/sankey`
Chord	Compare weighted relationships through circular ribbons.	`/chord`

Financial charts

Chart	When to use it	Import subpath
Candlestick	Compare open, high, low, and close values over time.	`/candlestick`
OHLC	Show open, high, low, and close values with compact ticks.	`/ohlc`
Volume and price	Compare price movement with trading volume.	`/volume-price`

Choose the right data shape

Use columns, bars and lollipops for category comparisons; stacked variants show totals, while 100% stacked variants show proportions.
Use lines and areas for ordered trends; combination charts compare series with different mark styles.
Use scatter, bubble and density charts for numeric relationships. Map the required X, Y and optional size channels explicitly.
Use hierarchy metadata for treemap, sunburst, icicle and circle packing.
Use observations or distribution summaries for box plots and violins; use explicit bounds for ranges and intervals.
Use financial channels for OHLC and volume-price charts, and actual/target bindings for KPI and progress charts.

The library preserves explicit numeric values and nulls. It does not silently aggregate repeated category keys or infer missing observations. See Data & Configuration for conversion rules.

Optional geographic charts

Three geographic types are available through @revolist/charts/geographic. They are capability packs with application-supplied providers and assets, and are separate from the native catalog above:

Type	Purpose	Required application input
Choropleth	Compare values through filled geographic regions.	Region geometry and values.
Proportional symbol map	Compare geographic values through sized symbols.	Coordinates, values and symbol sizes.
Geographic heatmap	Show spatial concentration through a heat layer.	Geographic heat points and values.

ECharts and vector PDF are optional integrations rather than additional chart families. See Installation.

When to use Pivot Charts

Standalone Charts owns visualization and local interaction. For grouped grid results, queries, linked refreshes, drill-down or filter synchronization, use Pivot Charts, which consumes the same chart engine.