FSparklineGroup
The facade class for the sparkline group.Which uses to setting multiple sparklines, all sparkline in the same group will share the configs.
Colors and UI options
Use setConfig() for visual options; there is no separate setColor() method on FSparkline. Settings apply to the entire group. Import the configuration enums from @univerjs-pro/sheets-sparkline; only SparklineTypeEnum is also exposed through univerAPI.Enum.
| Option | Configuration |
|---|---|
| Chart type | type: SparklineTypeEnum (line, bar, profit/loss, pie) |
| Series color | seriesColor: CSS color string; set themeType: SparklineThemeTypeEnum.CUSTOM |
| Preset palette | themeType: SparklineThemeTypeEnum |
| Line width and gradient | lineWidth, showGradient |
| Rounded bars | showRadius |
| Highlight points | points.highPoint, lowPoint, firstPoint, lastPoint, negativePoint, markersPoint; each accepts { visible, color } |
| Axis | axis: { visible, color, reverse } |
| Minimum / maximum scale | extremumMin, extremumMax: { type: SparklineExtremumTypeEnum, value? }; value applies to CUSTOM_EXTREMUM |
| Empty / nonnumeric cells | emptyShowAs, nonNumShowAs: SpacialShowAsEnum |
| Hidden cells | containHiddenCells |
Options depend on chart type: line width, markers and gradient concern line charts; rounded corners concern bar and profit/loss charts. Configuration updates merge top-level fields, but nested objects such as points and axis are replaced rather than deeply merged.
The current command targets the active worksheet selection. Activate the worksheet and select the sparkline cell before updating its group; retrieving a group alone does not change the selection.
import { SparklineThemeTypeEnum, SparklineTypeEnum } from '@univerjs-pro/sheets-sparkline'const workbook = univerAPI.getActiveWorkbook()if (!workbook) throw new Error('No active workbook')const worksheet = workbook.getActiveSheet()const cell = worksheet.getRange('A10')workbook.setActiveRange(cell)const group = worksheet.getSparklineGroupByCell(9, 0)if (!group) throw new Error('No sparkline at A10')group.setConfig({ type: SparklineTypeEnum.LINE_CHART, themeType: SparklineThemeTypeEnum.CUSTOM, seriesColor: '#2563eb', lineWidth: 2, showGradient: true, points: { highPoint: { visible: true, color: '#16a34a' }, lowPoint: { visible: true, color: '#dc2626' }, }, axis: { visible: true, color: '#64748b', reverse: false },})Access
Access through:
Setup
Register @univerjs-pro/sheets-sparkline or a preset that includes it. In plugin mode, import @univerjs-pro/sheets-sparkline/facade. Additional methods below require their listed plugin packages. See Facade setup.
@univerjs-pro/sheets-sparkline
FSparklineGroup.changeDataSource
changeDataSource(sourceRanges: IRange[], targetRanges: IRange[]): FSparklineGroup | undefinedParameters
sourceRanges— Required. Location of new data sourcetargetRanges— Required. New placement
Returns
Return this, for chaining
Examples
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getSheetByName('Sheet1')if (!fWorksheet) throw new Error('fWorksheet is not available')// Create a sparkline in the range A10, with the data source in the range A1:A7.const sparkline = fWorksheet.addSparkline( [fWorksheet.getRange('A1:A7').getRange()], [fWorksheet.getRange('A10').getRange()],)// Get sparkline group by cell A10const sparklineGroup = fWorksheet.getSparklineGroupByCell(9, 0)setTimeout(() => { // Modify the data source of the sparkline group to the range B1:B7 after 3 seconds. sparklineGroup.changeDataSource( [fWorksheet.getRange('B1:B7').getRange()], [fWorksheet.getRange('A10').getRange()], )}, 3000)Types: FSparklineGroup · IRange
Package: @univerjs-pro/sheets-sparkline · Type definitions
FSparklineGroup.removeSparklineGroup
removeSparklineGroup(): voidExamples
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getSheetByName('Sheet1')if (!fWorksheet) throw new Error('fWorksheet is not available')// Create a sparkline in the range A10, with the data source in the range A1:A7.const sparkline = fWorksheet.addSparkline( [fWorksheet.getRange('A1:A7').getRange()], [fWorksheet.getRange('A10').getRange()],)// Get sparkline group by cell A10const sparklineGroup = fWorksheet.getSparklineGroupByCell(9, 0)setTimeout(() => { // Remove sparkline group after 3 seconds. sparklineGroup.removeSparklineGroup()}, 3000)Package: @univerjs-pro/sheets-sparkline · Type definitions
FSparklineGroup.setConfig
setConfig(config: ISparklineGroupConfig): FSparklineGroupParameters
config— Required. new sparkline group config
Returns
Return this instance, for chaining
Examples
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getSheetByName('Sheet1')if (!fWorksheet) throw new Error('fWorksheet is not available')// Create a sparkline in the range A10, with the data source in the range A1:A7.const sparkline = fWorksheet.addSparkline( [fWorksheet.getRange('A1:A7').getRange()], [fWorksheet.getRange('A10').getRange()],)// Get sparkline group by cell A10const sparklineGroup = fWorksheet.getSparklineGroupByCell(9, 0)// Set sparkline type to bar chart after 3 secondssetTimeout(() => { sparklineGroup.setConfig({ type: univerAPI.Enum.SparklineTypeEnum.BAR_CHART, })}, 3000)Types: FSparklineGroup · ISparklineGroupConfig
Package: @univerjs-pro/sheets-sparkline · Type definitions
How is this guide?