Sparkline 0.5.2+
| Facade API | Has Paid Plan | Univer Server | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | ✅ | - | ✅ | UniverSheetsAdvancedPreset |
A sparkline is a concise and intuitive small chart, typically embedded within table cells, used to quickly showcase data trends or key metrics.
This feature includes the following plugin packages:
@univerjs-pro/sheets-sparklineSparkline plugin@univerjs-pro/sheets-sparkline-uiSparkline UI plugin
Presets Installation
Please follow the instructions in Print.
Piecemeal Installation
npm install @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-uiimport { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetSparklinePlugin } from '@univerjs-pro/sheets-sparkline';
import { UniverSheetSparklineUIPlugin } from '@univerjs-pro/sheets-sparkline-ui';
import SheetsSparklineUIEnUS from '@univerjs-pro/sheets-sparkline-ui/locale/en-US';
import '@univerjs-pro/sheets-sparkline/facade';
import '@univerjs-pro/sheets-sparkline-ui/lib/index.css';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
SheetsSparklineUIEnUS
),
},
});
univer.registerPlugin(UniverSheetSparklinePlugin);
univer.registerPlugin(UniverSheetSparklineUIPlugin);Univer on Node.js Piecemeal Installation
npm install @univerjs-pro/sheets-sparklineimport { LocaleType, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetSparklinePlugin } from '@univerjs-pro/sheets-sparkline';
import '@univerjs-pro/sheets-sparkline/facade';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
});
univer.registerPlugin(UniverSheetSparklinePlugin);Facade API
To get full defination of facade api, please refer to FacadeAPI
Add Sparkline
The FWorksheet.addSparkline method is used to add sparklines in a specified range.
const fSheet = univerAPI.getActiveWorkbook().getActiveSheet();
fSheet.addSparkline(
[{ startRow: 0, endRow: 1, startColumn: 0, endColumn: 0 }],
[{ startRow: 2, endRow: 2, startColumn: 0, endColumn: 0 }]
);Compose & Uncompose Sparkline
The FWorksheet.composeSparkline and FWorksheet.unComposeSparkline methods are used to compose and uncompose sparklines.
const fSheet = univerAPI.getActiveWorkbook().getActiveSheet();
fSheet.composeSparkline([{ startRow: 0, endRow: 10, startColumn: 0, endColumn: 10 }]);
fSheet.unComposeSparkline([{ startRow: 0, endRow: 10, startColumn: 0, endColumn: 10 }]);Get Sparkline & Sparkline Group Instances
The FWorksheet.getSparklineByCell method is used to get the sparkline instance in a specified cell.
The FWorksheet.getSparklineGroupByCell method is used to get the sparkline group instance in a specified cell.
const fSheet = univerAPI.getActiveWorkbook().getActiveSheet();
const sparkline = fSheet.getSparklineByCell(2, 0);
const sparklineGroup = fSheet.getSparklineGroupByCell(2, 0);Both sparkline and sparkline group instances include a set of methods for managing and manipulating sparklines and sparkline groups.
FSparkline
| Methods | Description |
|---|---|
| changeDataSource | Modify the data source and placement of the sparkline in the current cell. |
| removeSparkline | Remove the sparkline in the current cell. |
FSparklineGroup
| Methods | Description |
|---|---|
| changeDataSource | Modify the data source and placement of the sparkline group in the current cell. |
| removeSparklineGroup | Remove the sparkline group containing the sparkline in the current cell. |
| setConfig | Change the configuration of the sparkline group in the current cell. |