Angular

Search results

Illustrations in Angular Spreadsheet component

25 Sep 2022 / 7 minutes to read

Illustrations help you to insert an image, shapes, and graphic objects in the Essential JS 2 spreadsheet.

Image

Adding images to a spreadsheet can enhance the visual appeal and help to convey information more clearly.

The default value for the allowImage property is true.

Insert Image

You can insert the image by using one of the following ways,

Selecting the Insert tab in the Ribbon toolbar, and then choose the Image tab.
Use the insertImage() method programmatically.

The available parameters in insertImage() method are,

Parameter	Type	Description
images	`ImageModel`	Specifies the options to insert image in spreadsheet.
range(optional)	`string`	Specifies the range in spreadsheet.

The available arguments in ImageModel are:

src: Specifies the image source.
id: Specifies the image element id.
height: Specifies the height of the image.
width: Specifies the width of the image.
top: Specifies the top position of the image.
left: Specifies the left side of the image.

In a spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF, and JPEG files.

Delete Image

If you want to delete the image, just select the image, and then press the Delete key.
Use the deleteImage() method programmatically.

The available parameters in deleteImage() method are,

Parameter	Type	Description
id	`string`	Specifies the id of the image element to be deleted.
range(optional)	`string`	Specifies the range in spreadsheet.

Image Customization

Image feature allows you to view and insert an image in a spreadsheet, and you can change the height and width of the image by resizing and moving it to another position.

Height and Width

You can change the height and width of the image by resizing.
Use the height and width property in the insertImage() method programmatically.

Top and Left

You can change the position of the image by drag and drop.
Use the top and left property in the insertImage() method programmatically.

Source

Preview

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion Angular Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Spreadsheet Control" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            font-family: 'Helvetica Neue', 'calibiri';
            font-size: 16px;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <app-container>
        <div id='loader'>LOADING....</div>
    </app-container>
</body>

</html>

Limitations of Image

The following features have some limitations in Image:

Corner resizing option in the image element.
Copy and paste the external image.

Chart

A chart is a graphical representation of data, that organizes and represents a set of numerical or qualitative data. It mostly displays the selected range of data in terms of x-axis and y-axis. You can use the allowChart property to enable or disable the chart functionality.

The default value for the allowChart property is true.

Types of chart

The following types of charts are available in the Spreadsheet.

Column Chart

Bar Chart

Area Chart

Line Chart

Pie Chart

Scatter Chart

Insert Chart

You can insert the chart by using one of the following ways,

Select the chart icon in the Ribbon toolbar under the Insert Tab.
Use the insertChart() method programmatically.

The available parameter in the insertChart() method is,

Parameter	Type	Description
chart	`ChartModel`	Specifies the options to insert a chart in the spreadsheet.

The available arguments in the ChartModel are:

type: Specifies the type of chart.
theme: Specifies the theme of a chart.
isSeriesInRows: Specifies to switch the row or a column.
range: Specifies the selected range or specified range.
id: Specifies the chart element id.

Delete Chart

If you want to delete the chart, just select the chart, and then press the Delete key.
Use the deleteChart() method programmatically.

The available parameter in the deleteChart() method is,

Parameter	Type	Description
id	`string`	Specifies the id of the chart element to be deleted.

Chart Customization

Chart feature allows you to view and insert a chart in a spreadsheet, and you can change the height and width of the chart by resizing and moving it to another position.

You can change the height and width of the chart by resizing.
You can change the position of the chart by drag and drop.

Source

Preview

app.component.ts

app.module.ts

datasource.ts

main.ts

import { Component, ViewChild } from '@angular/core';
import { SpreadsheetComponent, getFormatFromType, ChartModel } from '@syncfusion/ej2-angular-spreadsheet';
import { chartData } from './datasource';

@Component({
selector: 'app-container',
template: `<ejs-spreadsheet #spreadsheet (created)="created()">
    <e-sheets>
        <e-sheet name="Book Sales">
            <e-rows>
                <e-row [height]=30>
                    <e-cells>
                        <e-cell value="Book Sales 2016-2020" [style]="{ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }"></e-cell>
                    </e-cells>
                </e-row>
                <e-row>
                    <e-cells>
                        <e-cell [index]="7" [chart]="chart"></e-cell>
                    </e-cells>
                </e-row>
            </e-rows>
            <e-ranges>
                <e-range [dataSource]="data" startCell="A3"></e-range>
            </e-ranges>
            <e-columns>
                <e-column [width]=110></e-column>
                <e-column [width]=100></e-column>
                <e-column [width]=100></e-column>
                <e-column [width]=100></e-column>
                <e-column [width]=100></e-column>
                <e-column [width]=100></e-column>
            </e-columns>
        </e-sheet>
    </e-sheets>
</ejs-spreadsheet>`
})
export class AppComponent {
@ViewChild('spreadsheet')
spreadsheetObj: SpreadsheetComponent;
public chart: ChartModel[] = [{ type: "Column", range: "A3:F8" }];
data: Object[] = chartData;
created() {
    this.spreadsheetObj.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A3:F3');
    this.spreadsheetObj.numberFormat(getFormatFromType('Currency'), 'B4:F8');
    this.spreadsheetObj.merge('A1:F1');
}
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SpreadsheetAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

/**
 * Chart data source
 */
export let chartData: Object[] = [
    { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 },
    { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 },
    { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 },
    { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 },
    { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 }
];

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Limitations of Chart

The following features have some limitations in the Chart:

Insert row/delete row between the chart data source will not reflect the chart.
Copy/paste into the chart data source will not reflect the chart.
Corner resizing option in chart element.

Note

You can refer to our Angular Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our Angular Spreadsheet example to knows how to present and manipulate data.