# FSparklineGroup - Human documentation: [https://docs.univer.ai/reference/facade/sparkline-group](https://docs.univer.ai/reference/facade/sparkline-group) - Agent Markdown: [https://docs.univer.ai/reference/facade/sparkline-group.md](https://docs.univer.ai/reference/facade/sparkline-group.md) - Requested language: `en-US` - Content language: `en-US` - Documentation version: `1.0.0-rc.0` - Source: [facade/sparkline-group.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/facade/sparkline-group.mdx) --- 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()`](#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. ```ts 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: * [`FWorksheet.getSparklineGroupByCell()`](https://docs.univer.ai/reference/facade/worksheet.md#getsparklinegroupbycell) ## Setup Register [`@univerjs-pro/sheets-sparkline`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/sheets-sparkline.md) 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](https://docs.univer.ai/guides/sheets/getting-started/facade.md). ## `@univerjs-pro/sheets-sparkline` ### `FSparklineGroup.changeDataSource` ```typescript changeDataSource(sourceRanges: IRange[], targetRanges: IRange[]): FSparklineGroup | undefined ``` **Parameters** * `sourceRanges` — Required. Location of new data source * `targetRanges` — Required. New placement **Returns** Return this, for chaining **Examples** ```ts 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 A10 const 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`](https://docs.univer.ai/reference/facade/sparkline-group.md) · [`IRange`](https://docs.univer.ai/reference/types/range.md) **Package:** [`@univerjs-pro/sheets-sparkline`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/sheets-sparkline.md) · [Type definitions](https://unpkg.com/@univerjs-pro/sheets-sparkline@1.0.0-rc.0/lib/types/facade/f-sparkline-group.d.ts) ### `FSparklineGroup.removeSparklineGroup` ```typescript removeSparklineGroup(): void ``` **Examples** ```ts 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 A10 const sparklineGroup = fWorksheet.getSparklineGroupByCell(9, 0) setTimeout(() => { // Remove sparkline group after 3 seconds. sparklineGroup.removeSparklineGroup() }, 3000) ``` **Package:** [`@univerjs-pro/sheets-sparkline`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/sheets-sparkline.md) · [Type definitions](https://unpkg.com/@univerjs-pro/sheets-sparkline@1.0.0-rc.0/lib/types/facade/f-sparkline-group.d.ts) ### `FSparklineGroup.setConfig` ```typescript setConfig(config: ISparklineGroupConfig): FSparklineGroup ``` **Parameters** * `config` — Required. new sparkline group config **Returns** Return this instance, for chaining **Examples** ```ts 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 A10 const sparklineGroup = fWorksheet.getSparklineGroupByCell(9, 0) // Set sparkline type to bar chart after 3 seconds setTimeout(() => { sparklineGroup.setConfig({ type: univerAPI.Enum.SparklineTypeEnum.BAR_CHART, }) }, 3000) ``` **Types:** [`FSparklineGroup`](https://docs.univer.ai/reference/facade/sparkline-group.md) · [`ISparklineGroupConfig`](https://unpkg.com/@univerjs-pro/sheets-sparkline@1.0.0-rc.0/lib/types/common/type.d.ts) **Package:** [`@univerjs-pro/sheets-sparkline`](https://docs.univer.ai/reference/packages/plugins/univerjs-pro/sheets-sparkline.md) · [Type definitions](https://unpkg.com/@univerjs-pro/sheets-sparkline@1.0.0-rc.0/lib/types/facade/f-sparkline-group.d.ts)