Meet RevoGrid Charts: JavaScript Charts for Your Next Dashboard

Two views of dashboard data: a combination chart and a hierarchical treemap. Actual local chart renders with illustrative sample data.

Your application already has the numbers. The next challenge is helping someone understand them: which category leads, whether a target is slipping, or where a larger total comes from. A useful dashboard makes those questions easy to ask and the answers easy to see.

RevoGrid Charts starts with standalone JavaScript charts in an ordinary HTML container. You can build a chart without adding a grid or Pivot table, and use it inside your preferred application framework. When users need to explore grouped data, the same chart engine also powers RevoGrid Pivot.

The local implementation includes 68 built-in chart types. Here are four practical places to start.

Standalone Charts preview

This introduction previews the standalone package using locally rendered examples. RevoGrid Charts is commercial software; confirm release availability and licensed package access before planning an installation.

Which categories deserve attention?

A grouped bar chart gives users a direct comparison across categories. Think sales by region, spending by department, or completed work by team. Placing series alongside each other helps a reader compare both the categories and the measures within each category.

Horizontal bars are particularly useful when names need room. Give the axis a meaningful unit, keep the category order intentional, and choose series that belong on the same scale. A dashboard card should make its comparison clear before someone opens a tooltip.

Grouped bars make category comparisons visible. Actual local render with illustrative sample data.

Are we on track against the plan?

A total tells you where you are. A combination chart adds the context of where you expected to be. Columns can show actual results while lines show a target and forecast across the same months.

That puts the gap in view: did actuals catch up, fall behind, or change direction? In a revenue or operations dashboard, it gives users a reason to investigate a particular period. Keep units explicit and use a shared scale when the measures are directly comparable, as in the example below.

Actual, target and forecast share a monthly view. Actual local render with illustrative sample data.

Where does the total come from?

A treemap helps users see how parts fit inside a hierarchy. Regions contain countries; countries contain cities. Tile area represents contribution, while the surrounding groups preserve the structure that a flat ranking would lose.

Use this view to introduce a portfolio, product mix, or geographic breakdown. It helps someone notice a large contributor and understand its parent group. Keep a table or detail view nearby when the task requires exact values or close comparisons between similarly sized tiles.

Nested groups retain context while tile sizes show contribution. Actual local render with illustrative sample data.

Where are the patterns hiding?

A heatmap turns a matrix into something readers can scan. Put one dimension on each axis and encode the measure through color: activity across periods and teams, demand across locations and products, or performance across segments.

It is useful when the question is about concentration or repeated patterns. A strong color scale and a clear legend help readers interpret the pattern; tooltips or a companion table can provide the exact figures. Color should support the question you want users to answer.

A matrix becomes a visual scan for concentrations and differences. Actual local render with illustrative sample data.

Fit the chart into your application

Start with a per-chart import when you need a specific visualization. RevoGrid Charts also supports composing a selected set of chart definitions, or importing the complete catalog for an application with a chart picker.

Map your rows to categories and numeric series, then update the chart as application data changes. Row mapping does not automatically group or aggregate records: prepare the values your visualization needs. The installation guide explains package access, imports and mounting your first chart.

Themes, presentation settings and export help the result fit into the rest of the product. Use supported chart options to set titles, labels and colors, and let users take a graphic into a report with SVG or PNG export. Navigation and interaction capabilities depend on the selected chart type.

The same combination chart in a dark theme. Actual local render with illustrative sample data.

Add context with notes, annotations and ranges

Help readers understand why a number changed and focus on the part of the chart that matters:

• Notes: explain a campaign launch, an unusual result or a decision beside the relevant point.
• Drawing tools: add lines, arrows and rectangles to highlight a movement or a region. Enable the drawing toolbar to place, move, resize and edit supported annotation shapes.
• Reference lines and bands: configure a target, threshold or acceptable range through the API. A band shades a range across the plot; a rectangle highlights a bounded region.
• Date ranges: on supported time axes, offer 1M, 3M, YTD, 1Y and All presets, plus custom inclusive UTC dates.
• Zoom, pan and inspection: let readers explore a smaller window and inspect values with tooltips and supported crosshairs.

These tools work in standalone Charts, with support depending on the chart type. Saved annotations retain their chart coordinates across zoom. Committed annotations appear in graphic exports, while CSV stays focused on the data.

Explain a result and show the target

The “Launch shipment” note explains an observation; the “Sales goal” reference line gives the bars a target to compare against. Shown in the Pivot chart editor with illustrative sample data.

Highlight a region and adjust it on the chart

Select a rectangle to move or resize it, adjust its appearance, then choose Save. This Pivot chart uses the shared native drawing tools; the underlying bars remain unchanged. Illustrative sample data.

Focus on a date range

A three-month revenue view with the date preset, Custom range control and navigator visible together. Drag the navigator handles to adjust the window, or use the zoom and pan controls to explore. Actual standalone Charts workspace using illustrative sample data.

When the next question needs Pivot

Standalone charts support local selection and events your application can handle. When readers need to change groupings, inspect a hierarchy, or keep charts aligned with a filtered analytical result, Pivot provides that additional context.

Through the Pivot adapter, compatible chart marks carry analytical identity into supported drill and filter synchronization. Your users can move from noticing a pattern to exploring the underlying report. This integration supplies the Pivot behavior; it is an additional step beyond rendering standalone rows.

Explore the Charts documentation to choose a visualization and review the setup. Then try the Pivot Charts dashboard to explore charts alongside an interactive Pivot table.