<!DOCTYPE html><html><head><title>SpreadsheetAdapter</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-spreadsheetid="spreadsheet"width="100%"height="100%"></igc-spreadsheet></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Chart Adapter Overview
Using chartAdapter you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance.
In order to add a WorksheetChart to a worksheet, you must use the addChart method of the worksheet’s Shapes collection.You can find more detail of adding charts in Excel below.
Here are the steps by step description :
Add the SpreadsheetChartAdapterModule reference to your project
Create an instance of a SpreadsheetChartAdapter class assigning it to the Spreadsheet
Run your app and load a worksheet containing a chart.
Supported Charts Types
There are over 35 chart types supported by the Spreadsheet ChartAdapters including, Line, Area, Column, and Doughnut. See the full list here:
Column Charts
Clustered column
Stacked column
100% stacked column
Line Charts
Line
Line with Markers
Stacked line
Stacked line with markers
100% stacked line
100% stacked line with markers
Pie Charts
Donut Charts
Bar Charts
Clustered bar
Stacked bar
100% stacked bar
Area Charts
Area
Stacked area
100% stacked area
XY (Scatter) and Bubble Charts
Scatter (with Marker only)
Scatter with smooth lines
Scatter with smooth lines and markers
Scatter with straight lines
Scatter with straight lines and markers
Bubble (without effects)
Bubble3DEffect
Stock Charts
High-low-close
Open-high-low-close
Volume-high-low-close
Volume-open-high-low-close
Radar Charts
Radar without markers
Radar with markers
Filled Radar
Combo Charts
Column and line chart sharing xAxis
Column and line chart and 2nd xAxis
Stacked Area and Column
Custom Combination
Dependencies
In the following code snippet, an external ExcelUtility class is used to save and load a workbook.
When setting up your Web Components spreadsheet control to add charts, you will need to import the SpreadsheetChartAdapter class like so: