Build Dynamic, Data-Driven Charts with the SpreadJS DataCharts Add-On

SpreadJS already includes support for standard Excel-compatible charts. This optional DataCharts add-on is designed to support creating charts that bind directly to structured application data via the SpreadJS Data Manager, rather than relying on worksheet cell ranges.

Bind charts directly to Data Manager tables
Visualize data without first placing it in worksheet cells
Map data fields to chart categories, values, series, and other elements
Build through the runtime API or Designer tools

Download Free SpreadJS Trial Online DataCharts Demos

Build faster, give your AI coding assistant access to MESCIUS docs, APIs, and code examples — explore the MESCIUS MCP Server →

Data-Driven Charting Beyond the Spreadsheet

SpreadJS’s DataCharts add-on provides a flexible way to create rich, data-driven visualizations inside JavaScript spreadsheet applications. Unlike standard Excel-like charts, typically tied to cell ranges, DataCharts can bind to data sources outside the workbook. Making DataCharts well-suited for externally data-driven dashboards, reporting interfaces, and applications built around structured application data. Developers can map data fields directly to chart elements, configure a variety of plot types, and customize the presentation to fit specific application requirements.

SpreadJS Charts vs. DataCharts Add-On: What’s the Difference?

SpreadJS supports creating, loading, and saving Excel-style charts - including loading charts from imported Excel files - right out of the box. These traditional charts are spreadsheet-centric and tied to worksheet data. The DataCharts add-on however uses data that is independent of the worksheet data and is designed for applications where chart data exists externally outside of the SpreadJS spreadsheet cells.

	SpreadJS Built-in Charts	DataCharts Optional Add-On
Best For	Excel compatibility	Data-driven dashboards, reporting apps, and chart web applications
Data Source	Worksheet cells and ranges	Data Manager tables
Binding Model	Cell references	Field-based mappings
Spreadsheet Dependency	Tied to worksheet data	Independent of worksheet grid
Data Architecture	Data and visualization stored together	Separation of data and presentation
Hierarchical Data Support	Limited spreadsheet model	Supports structured and hierarchical mappings
Styling & Configuration	Traditional chart settings	Advanced encodings, plots, and visual customization
ReportSheet Integration	Standard chart workflows	Native Data Manager/ReportSheet scenarios
Excel Export	Remains an Excel-compatible chart	Exported as an image

Ultimate JS Data-Driven Chart Component

Bind Charts Directly to Application Data

Connect DataCharts directly to SpreadJS Data Manager tables instead of first placing source data into worksheet cells. Field-based encodings let developers map values, categories, related tables, hierarchical data, filters, colors, and other dimensions directly to chart visualizations, making DataCharts ideal for dashboards, reporting systems, and other data-driven application.

Easily Design Charts

Developers and end users can quickly design and bind DataCharts to data sources. The Data Charts Panel can be initialized at runtime within a SpreadJS application or accessed through SpreadJS' designer options, including the Designer Ribbon Component add-on, providing a visual way to configure chart data, mappings, and presentation without relying entirely on code.

Easily Design JavaScript Data-Driven Charts Using a Familiar User Interface

Build Rich Chart Types in JavaScript Web Applications

Supports a Wide Range of Data Chart Types

Build rich visualizations with a broad selection of chart types, including Column, Bar, Line, Area, Pie, Donut, Scatter, Bubble, Treemap, Funnel, Waterfall, Candlestick, OHLC, and Combo charts. This variety gives developers the flexibility to visualize everything from categorical comparisons and trends to hierarchical and financial data.

JavaScript Data-Driven Chart Control Features

Data-Driven Charting Control for JS Spreadsheet Applications

Data Manager Table Binding

Bind DataCharts directly to tables managed by the SpreadJS Data Manager, giving charts access to structured application data without relying on worksheet cell ranges.

Use fields from multiple related tables to build JavaScript charts

Multi-Table Data Binding

Bind DataCharts to related Data Manager tables and visualize fields across multiple connected datasets without combining everything into a single table.

Group Date fields for clearer chart analysis

Date-Based Category Grouping

Group Date fields by year, quarter, month, day, hour, minute, or second to organize time-based data for clearer chart analysis.

Create multi-level chart categories in JS apps

Hierarchical Category Binding

Create multi-level chart categories for naturally nested data, such as Year → Quarter → Month or Region → Country → City.

Field-Based Data Binding

Bind Data Manager fields to chart elements such as values, categories, colors, tooltips, filters, and trellis layouts using flexible field-based mappings.

Trellis / Small Multiples

Create small-multiple visualizations that split one dataset into repeated chart panels, making it easier to compare the same measure across categories such as region, product, department, or time period.

Data Manager Table Binding

Each DataChart add-on connects to a Data Manager table through the tableName property in its chart configuration. This lets developers define chart data directly from managed tables and keep visualization logic separate from worksheet cells. DataCharts can also work with multiple related tables when relationships are defined in the Data Manager, with related fields referenced using tableName.fieldName. This provides a flexible foundation for building data-driven charts from structured application data.

Multi-Table Data Binding

The optional SpreadJS DataCharts add-on can reference fields from multiple related Data Manager tables when relationships are defined between them. Developers can use path expressions such as “orderDetailsTable.Sales” to pull values from a related table while grouping or categorizing data from the primary table. This makes it easier to build visualizations from normalized or relational application data without restructuring the source first.

Date-Based Category Grouping

DataCharts support date-based category encoding through the dateMode setting, which controls how Date values are grouped within a chart. Developers can organize a single Date field by time units such as year, quarter, month, day, hour, minute, or second, while leaving the original Date values unchanged when dateMode is not specified. This makes it easier to present time-based data at the level of detail that best fits the visualization. Date category encoding is supported across many category-based chart types, including Column, Bar, Line, Area, Waterfall, Candlestick, and OHLC charts.

Hierarchical Category Binding

Hierarchical Category Binding lets developers define multiple grouping levels within a single DataChart plot using nested child mappings. Each level further refines the grouping of its parent, making it easier to visualize structured or nested datasets on a multi-level category axis. Hierarchies can also include Date fields, with each level configured independently using its own dateMode. All hierarchy levels are displayed together, providing a clear view of grouped data without requiring separate charts.

Field-Based Data Binding

Field-based data binding gives developers and end users precise control over how Data Manager fields are represented in a DataChart. Fields can be mapped to dedicated areas for Values, Category, Detail, Color, Row, Column, and Filter, making it easy to define measures, grouping, visual segmentation, tooltips, trellis panels, and source-level filtering. In the Data Chart Designer, users can drag fields into these binding areas and configure options such as sorting, aggregation, formatting, and chart-specific behavior. This flexible encoding model enables the creation of complex, data-driven visualizations without relying on worksheet cell ranges.

Trellis / Small Multiples

Trellis Binding partitions a single dataset into multiple chart panels using row and column encodings. Developers can create row-based, column-based, or two-dimensional trellis layouts, with each panel using the same chart type and visual configuration while displaying a filtered subset of the data. Multi-level trellis hierarchies are supported through nested fields, and layout options can control axis placement and the handling of empty cells. In the Data Chart Designer, users can configure trellis layouts visually by assigning fields to the Row and Column binding areas.

JavaScript data-driven Column and Bar charts for clear trend analysis

Column & Bar Charts

Compare categories and aggregated values with flexible Column and Bar charts, including standard, range, stacked, and percent stacked variations.

View Demos and Code: Column Chart, Bar Chart
Column Chart and Bar Chart Documentation

Line & Area Charts

Visualize trends, movement, and changes over time with flexible Line and Area charts that support multiple series, hierarchical categories, and customizable line styles.

View Demos and Code: Line Chart, Area Chart
Line Chart and Area Chart Documentation

JavaScript DataCharts Ass-On Supported Pie and Donut charts

Pie & Donut Charts

Visualize part-to-whole relationships with Pie and Donut charts that clearly show each category’s proportional contribution to a total.

View Demos and Code: Pie Charts, Donut Charts
Pie and Donut Charts Documentation

JavaScript Scatter and Bubble charts for analyzing relationships across numerical data

Scatter & Bubble Charts

Visualize relationships between numeric variables with Scatter and Bubble charts, using point position, color, and bubble size to reveal patterns and differences in your data.

Treemap & Funnel Charts

Visualize hierarchical proportions and process stages with Treemap and Funnel charts designed for compact comparison and flow analysis.

View Demos and Code: Treemap Chart, Funnel Chart
Treemap Chart and Funnel Chart Documentation

Waterfall Charts

Track how sequential gains and losses contribute to a running total with Waterfall charts designed for financial, budget, and performance analysis.

Candlestick and OHLC JS charts | Built for financial and trading data | FinTech

Financial Charts

Visualize market price movement with Candlestick and OHLC charts built for financial and trading data.

View Demos and Code: Candlestick Chart, OHLC Chart
Candlestick Chart and OHLC Chart Documentation

Combine multiple JavaScript chart types in a single visualization

Combo Charts

Visualize market price movement with Candlestick and OHLC charts built for financial and trading data.

View Demos and Code: Candlestick Chart, OHLC Chart
Candlestick Chart and OHLC Chart Documentation

Column & Bar Charts

SpreadJS DataCharts support both vertical Column charts and horizontal Bar charts for clear categorical comparisons and trend analysis. Developers can choose from standard, Range, Stacked, and Percent Stacked variations, with support for hierarchical categories, value aggregation, and positive/negative color formatting. Range charts can visualize lower-to-upper intervals, while stacked options make it easy to show category totals alongside sub-category composition. Bar charts are especially useful when longer category labels benefit from a horizontal layout.

View Demos and Code: Column Chart, Bar Chart
Column Chart and Bar Chart Documentation

Line & Area Charts

SpreadJS DataCharts support Line and Area chart types for tracking trends across categories or time-based data. Line charts connect data points to highlight directional movement, while Area charts fill the space beneath the line to emphasize magnitude and contribution. Developers can configure hierarchical categories, multiple series, custom color palettes, symbols, line thickness, and rendering styles such as spline, step, and Bezier curves. Area charts also support Range, Stacked, and Percent Stacked variations for visualizing intervals, totals, and proportional composition.

View Demos and Code: Line Charts, Area Charts
Line Charts and Area Charts Documentation

Pie & Donut Charts

SpreadJS DataCharts support Pie and Donut charts for presenting proportional data as intuitive radial visualizations. Pie charts display categories as slices of a whole, while Donut charts use an adjustable innerRadius to create a centered opening while preserving the same proportional view. Developers can bind values and category details through field-based encodings and customize properties such as color palettes, opacity, start angle, radius, and sweep through code or the DataCharts Designer. These chart types are well suited for displaying a single positive-value series where relative contribution is the primary focus.

View Demos and Code: Pie Chart, Donut Chart
Pie and Donut Chart Documentation

Scatter & Bubble Charts

SpreadJS DataCharts support Scatter and Bubble charts for analyzing relationships across numerical data. Scatter charts plot paired values along the x- and y-axes, while Bubble charts add a third measure through bubble size using the size encoding. Developers can also apply color mappings to distinguish categories and customize visual properties such as palettes, opacity, point symbols, data labels, and axis styling. These chart types are especially useful for comparative, scientific, and analytical visualizations where relationships and variation are more important than category totals.

Treemap & Funnel Charts

SpreadJS DataCharts support Treemap charts for displaying hierarchical data as nested rectangles, with rectangle size driven by numeric values and hierarchy defined through multiple details fields. Developers can customize leaf labels and non-leaf headers to make multi-level structures easier to interpret. Funnel charts visualize sequential stages such as sales pipelines, conversions, or recruiting flows, using category-value binding to size each stage. Funnel-specific settings also support different funnel shapes, horizontal or vertical orientation, reversed direction, custom colors, labels, and other styling options through code or the SpreadJS Designer.

View Demos and Code: Treemap Chart, Funnel Chart
Treemap Chart and Funnel Chart Documentation

Waterfall Charts

SpreadJS DataCharts support Waterfall charts for visualizing how positive and negative values build toward a cumulative result. Developers can bind a single category field and numeric value field, group Date categories with dateMode, and optionally display a final total bar for summary analysis. Waterfall-specific settings include showTotal, totalLabel, horizontal or vertical orientation, and customizable connecting line styles between bars. Additional options for labels, tooltips, and animations make it easy to create polished profit bridges, variance analyses, and other incremental value visualizations.

Financial Charts

SpreadJS DataCharts support Candlestick and OHLC chart types for displaying price behavior across trading intervals. Candlestick charts bind open, high, low, and close values into a single vector-based value configuration, while OHLC charts support both four-field OHLC and three-field HLC modes for a more compact market view. Both chart types support flat or hierarchical category binding, making it easy to group financial data by structures such as Month → Day. These charts are well suited for analyzing market direction, volatility, and short-term price movement directly from Data Manager data.

View Demos and Code: Candlestick Chart, OHLC Chart
Candlestick Chart and OHLC Chart Documentation

Combo Charts

SpreadJS DataCharts support Combo Charts that combine compatible chart types such as Column, Line, Area, Candlestick, and OHLC into one unified visualization. Each subplot can use its own values, styling, labels, tooltips, legends, and value axis, while sharing common settings such as the category axis, title, appearance, and layout. Combo Charts support up to four subplots and as many as four value axes, making it easier to compare metrics with different ranges in a single chart. Developers and end users can configure Combo Charts programmatically or through the Data Chart Designer, where supported plot combinations and axis assignments can be managed visually.

Chart Elements

Customize key chart elements such as titles, axes, legends, data labels, tooltips, and animations to create clear, polished DataChart visualizations.

Support for Detailed Axis Configuration | JS Spreadsheet Add-On

Axes & Scales

Customize category and value axes to control chart scales, labels, ranges, formatting, grid lines, and date-based display behavior.

JavaScript Charts Flexible Legend and Label Options

Legends & Labels

Clarify chart series and data points with configurable legends and labels that make DataCharts easier to read and interpret.

Custom Styling

Customize the look and feel of DataCharts with flexible styling for colors, lines, symbols, labels, backgrounds, borders, legends, axes, tooltips, trellis layouts, and animations.

Chart Elements

SpreadJS DataCharts provide configurable chart elements that help developers control both presentation and readability. Customize headers for chart titles, axes for category and value scales, legends for series identification, and data labels for displaying values directly on chart points. Tooltips can provide additional context during interaction, while animation settings can enhance the visual experience. Each element can be formatted independently, giving developers the flexibility to tailor charts for specific data, layouts, and application requirements.

Axes & Scales

SpreadJS DataCharts provide detailed axis configuration through the IAxisOption interface, giving developers control over both category and value axes. Configure properties such as minimum and maximum values, axis position, label rotation, number and date formats, major and minor units, tick marks, grid lines, titles, and line styles. Date-based axes can use either evenly spaced ordinal categories or continuous Date scales, while dateMode and formatting options control how time-based values are grouped and displayed. These settings make it easier to tailor chart scales and presentation for precise, readable data visualization.

Legends & Labels

SpreadJS DataCharts provide flexible legend and label options for identifying series, categories, and individual data values. Legends can represent color or size encodings and can be customized with titles, positioning, alignment, dimensions, padding, and text styling through the ILegendOptions interface. Legend content is driven by the chart’s encodings, so color legends are generated from color mappings and size legends can be added for visualizations such as Bubble charts. These options help developers present complex data more clearly while maintaining control over chart layout and appearance.

Custom Styling

SpreadJS DataCharts offer extensive appearance and styling controls through code or the Data Chart Designer’s Inspector panel. Developers and end users can adjust color palettes, opacity, line and symbol styles, chart backgrounds, borders, titles, data labels, tooltips, axes, legends, trellis layouts, and animation behavior. Chart-specific options are also available, including positive and negative colors, Pie and Donut radius and sweep settings, and Treemap header styling. These controls make it easy to match DataCharts to application branding while improving readability and visual consistency.

Runtime API

Create and configure DataCharts programmatically with the SpreadJS DataCharts runtime API for full control over chart types, data bindings, plots, styling, and behavior.

DataChart Designer

Design and configure DataCharts visually with the Data Chart Designer, giving developers and end users an intuitive interface for data binding, styling, layout, and chart-specific settings.

SpreadJS Designer Integration

Integrate DataChart design tools directly into the SpreadJS Designer experience, giving users a visual way to insert, bind, configure, and style DataCharts within the application.

Create richer, more visual reports with flexible JS Data Charts

ReportSheet Integration

Add DataCharts directly to SpreadJS ReportSheets to create richer, more visual reports with flexible table- or cell-based data binding.

Runtime API

The SpreadJS DataCharts runtime API gives developers programmatic control over the complete charting experience through the GC.Spread.Sheets.DataCharts namespace. Create charts with the DataChart class, then define data sources, plots, encodings, axes, legends, styles, animations, and other settings through setChartConfig. Supporting classes, interfaces, and enumerations such as DataChartManager, IDataChartConfig, IPlotOption, IAxisOption, and DataChartType provide a structured API for building advanced data-driven visualizations. This makes the runtime API well suited for applications that need charts to be generated or updated dynamically based on application logic or changing Data Manager data.

DataChart Designer

The SpreadJS Data Chart Designer provides a visual workflow for configuring DataCharts without relying entirely on code. Through the Data Chart Panel and Inspector, users can manage data bindings and customize chart styles, titles, labels, tooltips, axes, legends, trellis layouts, and animations. Chart-specific controls are also available for features such as line and symbol styling, Pie and Donut settings, Treemap headers, and positive or negative value formatting. This gives developers the flexibility to expose rich chart-design capabilities directly within SpreadJS applications while providing end users with an approachable configuration experience.

SpreadJS Designer Integration

SpreadJS Designer integration brings DataChart creation and configuration into the familiar Designer workflow. Users can insert DataCharts, manage field bindings through the Data Chart Panel, and refine appearance, titles, labels, tooltips, axes, legends, trellis layouts, and animations through the Inspector. Chart-specific settings are exposed visually based on the selected chart type, helping reduce the need for manual configuration in code. This integration makes it easier to provide end users with a complete visual chart-authoring experience directly inside SpreadJS applications.

ReportSheet Integration

SpreadJS ReportSheet integration supports DataCharts as either Float Charts or Template Cell Charts, giving developers multiple ways to add visualizations to generated reports. Float Charts can be positioned anywhere in a ReportSheet and support both cell binding and direct Data Manager table binding, while Template Cell Charts repeat with their associated template cells and use the current cell context when retrieving data. This makes it possible to combine structured report layouts with dynamic, data-bound visualizations for clearer comparison and analysis.

See What Our Customers Are Saying

Learn how companies are solving real-world challenges with SpreadJS

Ramp Labs

SpreadJS allowed us to avoid spending significant engineering time rebuilding core spreadsheet functionality on the front end. Instead, we were able to focus our efforts on the agentic system, backend infrastructure, and performance.

Ben Geist, Ramp Labs Research Engineer

Building Ramp Sheets: How SpreadJS Helped Ramp Labs Build an AI-Native Spreadsheet Experience

Learn more about how Ramp Labs used SpreadJS to power the spreadsheet experience behind Ramp Sheets the #1 AI spreadsheet editor built for financial modeling and analysis.

Build Your Own JavaScript Data-Driven Chart

Quick Start Guide
1. Install and Import the Required Packages - Add SpreadJS, Shapes, and the Data Charts add-on to your application.	Import needed packages: `import * as GC from "@mescius/spread-sheets"; import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"; import "@mescius/spread-sheets-shapes"; import "@mescius/spread-sheets-datacharts-addon";`
2. Initialize the Workbook - Create a SpreadJS workbook and access the worksheet where the chart will appear.	Add a host element: `<div id="spreadjs-host" style="width: 100%; height: 500px;"></div>` Create the workbook and access its active worksheet: `const spread = new GC.Spread.Sheets.Workbook("spreadjs-host"); const sheet = spread.getActiveSheet();`
3. Connect Data - Add your data as a Data Manager table and call fetch() to load it.	`const dataManager = spread.dataManager(); const salesTable = dataManager.addTable("Sales", { data: [ { product: "Laptop", sales: 1250 }, { product: "Monitor", sales: 850 }, { product: "Keyboard", sales: 475 } ] }); await salesTable.fetch();`
4. Create and Configure the Chart - Use sheet.dataCharts.add() to insert the chart, then setChartConfig() to bind table fields and customize its type, values, categories, and appearance.	`const DC = GC.Spread.Sheets.DataCharts; const chart = sheet.dataCharts.add("sales-chart", 10, 10, 600, 400, DC.DataChartType.column); chart.setChartConfig({ tableName: "Sales", config: { header: { title: "Sales by Product" } }, plots: [{ type: DC.DataChartType.column, encodings: { values: [{ field: "sales", aggregate: DC.Aggregate.sum }], category: { field: "product" } } }] });`

Learn more with the Create Data Charts Documentation.

Easy Licensing & Distribution

After Purchasing Users Generate DataCharts Enabled SpreadJS Distribution Keys for Application/s Through Their MESCIUS Account.

Licensing & FAQs

The DataCharts add-on is enabled through a SpreadJS distribution key. SpreadJS is licensed per developer and deployed hostname, with deployment licenses varying by commercial or non-commercial use.

Learn More About Optional Add-On Licensing

Request a DataCharts Add-On Enabled Trial Key

Our sales team can provide a 30-day DataCharts enabled trial key upon request, allowing you to deploy SpreadJS and this optional add-on during your trial period.

Contact Our Sales Team

Have Questions? We're Here to Help

Email us.sales@mescius.com to schedule a call with our product specialists or request a personalized demo through support to discuss your project needs.

Contact Support

SpreadJS Media and Content

SpreadJS v19.2 Released!

Using the SpreadJS AI Assistant Add-On with Custom Trained Models

Customizing the Designer in SpreadJS, a JavaScript Spreadsheet Component

New AI Features in JavaScript Spreadsheets: Natural Language and Smart Analysis

New SpreadJS Addons: ReportSheet and GanttSheet

Introducing Real-Time Collaboration in JavaScript Spreadsheets

How to Add a JavaScript Spreadsheet Ribbon Component in Your Web App

View All Blogs

Building Ramp Sheets: How SpreadJS Helped Ramp Labs Build an AI-Native Spreadsheet Experience

Exploring the SpreadJS JavaScript Gantt Chart Component

New AI-Assistant Add-On Features in JavaScript Spreadsheets

New Real-Time Spreadsheet Collaboration in JavaScript Web Apps

SpreadJS Overview

Elevate JavaScript Spreadsheets with Designer Ribbon, PivotTable, GanttSheet & ReportSheet

Exploring the JavaScript Pivot Table Add-On

View All Videos

Building Real-Time Collaborative Spreadsheet Experiences in JavaScript Applications

Supercharge Your JavaScript Spreadsheets with an AI Assistant

What's New in SpreadJS v17

What's New in SpreadJS v16

What's New in SpreadJS v15

View All Webinars

Award-Winning Products and First-Class Support

"I have been using a various form of Spread back to the COM days. Spread is the most reliable spreadsheet that retrieves and stores data, whether interacting with a database or simply an Excel file. Try it out, and you will not go back to any other control"

TRUSTED CUSTOMER

"Great support through evaluation process, Spread is my favorite development add-in, adds great, high value capabilities to applications!"

TRUSTED CUSTOMER

"Excellent Products. I have been using their products for around 15 years. Always there to help."

TRUSTED CUSTOMER

Top 50 Product (#31) - Component Source 2025

SpreadJS Top 50 Product Award - Component Source 2026 Awards

Customer reviews provided by Feefo

Trusted by the World's Leading Companies

Company names and logos are trademarks of their respective owners. Their display is for identification purposes only and does not imply endorsement of or affiliation with MESCIUS.

"SpreadJS enabled the core spreadsheet interface that Ramp Sheets is built around. Rather than being an additive feature, it served as the foundation for the primary user experience."

Ben Geist, Ramp Labs

"Thanks for providing the best [JavaScript] spreadsheet widget in the world, we're very happy customers. Your product has saved us a TON of time relative to other solutions we used in the past."

Jan Domanski, Labstep

"We have been using Spread in our desk and web products (PerpetualBudget) for over a decade. Not only are the Spread grids great controls but the support at GrapeCity [now known as MESCIUS] is the best. When you need them, they're there!"

Jim Spicer, Spicer-Baer Associates

"One of the nice things about SpreadJS is that we could just plug it into our frontend and get all of that functionality directly out of the box without having to develop it ourselves. Spreadsheets are complicated… and I don't want to build them myself."

Alex Henkel, Ramp Labs

"I haven't come across such a feature-rich solid Spread before. Thanks for giving such a nice component."

Adavesh Managaon, MVP, Visual C#

"Spread benefits my company because our clients can now see the immediate benefit the websites we create for them provide."

Michael Stark, Owner, StarkNetwork.com