API Reference

GitHubdream-num/univer

FWorksheetChartMixin

GitHubEdit on GitHub
packages@univerjs-pro/sheets-chart-ui

APIs

getCharts

Returns an array of charts on this sheet.

Signature

getCharts(): FChart[]

Returns

  • (FChart[]) — - An array of charts on this sheet.

Examples

const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Get all charts on the active sheet.
const charts = fWorksheet.getCharts()
console.log(charts)

insertChart

Adds a new chart to this sheet.

Signature

insertChart(chartBuildInfo: IChartBuilderInfo): Promise<FChart>

Parameters

  • chartBuildInfo (IChartBuilderInfo) — - The chart builder info.

Returns

  • (Promise<FChart>) — - The new chart.

Examples

const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Create a column chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .build()
const fChart = await fWorksheet.insertChart(chartInfo)

newChart

Returns a builder to create a new chart for this sheet.The builder will not automatically create the chart. You must call build() on the returned builder to create the chart by calling insertChart(chartBuilder).

Signature

newChart(fChart?: FChart): FChartBuilderBase

Parameters

  • fChart (FChart) — - The chart to update.

Returns

  • (FChartBuilderBase) — - a new chart builder

Tags

  • @description — If the fChart is provided, the builder will be initialized with the existing chart's data.

Examples

const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Create a column chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The width of the chart is 600 and the height is 400.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setWidth(600)
  .setHeight(400)
  .build()
await fWorksheet.insertChart(chartInfo)

registerChartTheme

Univer chart is base on echarts, you can register your own theme by echart theme builder.

Signature

registerChartTheme(themeName: string, theme: IEchartTheme): void

Parameters

  • themeName (string) — - The name of the theme.
  • theme (IEchartTheme) — - The theme object.

Tags

Examples

const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// register your theme
const theme = { // your theme object
  version: 1,
  themeName: 'myTheme',
  theme: {
    // ... Some code is omitted for brevity
    color: [
      '#893448',
      '#d95850',
      '#eb8146',
      '#ffb248',
      '#f2d643',
      '#ebdba4',
    ],
    // ... Some code is omitted for brevity
    visualMapColor: [
      '#893448',
      '#d95850',
      '#eb8146',
      '#ffb248',
      '#f2d643',
      'rgb(247,238,173)',
    ],
    // ... Some code is omitted for brevity
    axes: [],
    // ... Some code is omitted for brevity
  },
}
fWorksheet.registerChartTheme('myTheme', theme)

// use your theme for chart
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setTheme('myTheme')
  .build()
await fWorksheet.insertChart(chartInfo)

removeChart

Removes a chart from the parent sheet.

Signature

removeChart(chart: FChart): Promise<boolean>

Parameters

  • chart (FChart) — - The chart to remove.

Examples

const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Create a column chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .build()
await fWorksheet.insertChart(chartInfo)

// Get all charts on the active sheet.
const charts = fWorksheet.getCharts()

// Remove the first chart after 3 seconds.
setTimeout(async () => {
  await fWorksheet.removeChart(charts[0])
  console.log(fWorksheet.getCharts())
}, 3000)

updateChart

Updates the chart on this sheet. This api can not update source range, please use FChart.updateRange.

Signature

updateChart(chartBuilder: IChartBuilderInfo): void

Parameters

  • chartBuildInfo — - The chart builder info.

Examples

const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// Create a column chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .build()
await fWorksheet.insertChart(chartInfo)

// Get all charts on the active sheet.
const charts = fWorksheet.getCharts()

// Update the first chart after 3 seconds.
setTimeout(() => {
  const newChartInfo = fWorksheet.newChart(charts[0])
    .asLineChart()
    .setOptions('legend.position', univerAPI.Enum.LegendPositionEnum.Right)
    .build()
  fWorksheet.updateChart(newChartInfo)
}, 3000)

Table of Contents

APIs
getCharts
insertChart
newChart
registerChartTheme
removeChart
updateChart
Capalyze