Chart

getCategoryData(): IChartDataCategory | undefined

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const charts = fWorksheet.getCharts();
if (charts.length > 0){
  const categoryData = charts[0].getCategoryData();
  console.log(categoryData);
}

getRange(): ISheetChartSourceSingleRange | undefined

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const charts = fWorksheet.getCharts();
console.log(charts[0]?.getRange());

getSeriesData(): IChartDataSeries[] | undefined

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const charts = fWorksheet.getCharts();
if (charts.length > 0){
 const seriesData = charts[0].getSeriesData();
 console.log(seriesData);
}

updateRange(rangeInfo: ISheetChartSourceSingleRange): Promise<boolean>

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

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

// Switch chart row direction
if (charts.length > 0){
  const rangeInfo = { ...charts[0].getRange() };
  rangeInfo.isRowDirection = !rangeInfo.isRowDirection;
  charts[0].updateRange(rangeInfo);
}

modify(): FChartBuilderBase

chartId: string

getChartId(): string

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const charts = fWorksheet.getCharts();
console.log(charts[0]?.getChartId());

subUnitId: string

unitId: string

addRange(range: IRange | string): this

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);

clearRange(): this

setPosition(anchorRowPos: number, anchorColPos: number, rowOffset: number, columnOffset: number): this

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 F3 and offset 20 pixels to the right and down.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setPosition(2, 5, 20, 20)
  .build();
await fWorksheet.insertChart(chartInfo);

setAbsolutePosition(x: number, y: number): this

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

// Create a column chart with data source A1:D6
// The starting position is (100, 200) pixels from the top left-hand corner of the sheet.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setAbsolutePosition(100, 200)
  .build();
await fWorksheet.insertChart(chartInfo);

getChartType(): ChartTypeBits

asLineChart(): LineChartBuilder

asPieChart(): PieChartBuilder

asRadarChart(): RadarChartBuilder

setChartType(chartType: ChartTypeBits): this

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 type to line after 3 seconds.
setTimeout(() => {
  const newChartInfo = fWorksheet.newChart(charts[0])
    .setChartType(univerAPI.Enum.ChartType.Line)
    .build();
  fWorksheet.updateChart(newChartInfo);
}, 3000);

setWidth(width: number): this

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);

setHeight(height: number): this

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);

setOptions(optionPath: string, optionVal: unknown): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorkSheet = fWorkbook.getActiveSheet();
const chartBuilder = fWorkSheet.newChart().asPieChart();
const chartBuilderInfo1 = chartBuilder
  .addRange('A1:D6')
  .setOptions('title.content', 'Chart Title')
  .setOptions('legend.position', 'right')
  .setDoughnutHole(0.5)
  .setHasPaddingAngle(true)
  .setRosePie(true)
  .setIsHalfPie(true)
  .build();
// setOptions can be replaced by setOptions('', { ... })
const chartBuilderInfo2 = chartBuilder
  .addRange('A1:D6')
  .setOptions('', {
    "title": {
      "content": "Chart Title"
    },
    "legend": {
      "position": "right"
    },
    "pie": {
      "doughnutHole": 0.5,
      "hasPaddingAngle": true,
      "isHalfPie": true,
      "rosePie": true
    }
  })
  .build();
await fWorkSheet.insertChart(chartBuilderInfo1);
// or they are same effect
// await fWorkSheet.insertChart(chartBuilderInfo2);

setTransposeRowsAndColumns(transposeRowsAndColumns: boolean): this

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 chart will transpose the rows and columns.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  // the chart will transpose the rows and columns
  .setTransposeRowsAndColumns(true)
  .build();
await fWorksheet.insertChart(chartInfo);

setTheme(theme: string): this

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
    ]
    // ... 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);

setXAxisTitle(title: string): this

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 x-axis title is 'xAxis Title text'.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setXAxisTitle('xAxis Title text')
  .build();
await fWorksheet.insertChart(chartInfo);

setYAxisTitle(title: string): this

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

// Create a line chart with data source A1:D6
// The starting position is upper-left corner of cell B2.
// The y-axis title is 'yAxis Title text'.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setYAxisTitle('yAxis Title text')
  .build();
await fWorksheet.insertChart(chartInfo);

setRightYAxisTitle(title: string): this

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

// Create a line chart with data source A1:D6
// The starting position is upper-left corner of cell B2.
// The right y-axis title is 'rightYAxis Title text'.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setRightYAxisTitle('rightYAxis Title text')
  .build();
await fWorksheet.insertChart(chartInfo);

setXAxisTextStyle(textStyle: IChartTextStyle): this

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 x-axis style is set.
const chartInfo = fWorksheet.newChart()
  .setChartType(univerAPI.Enum.ChartType.Column)
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setXAxisTextStyle({
    content: 'xAxis Title text',
    fontSize: 12,
    fontColor: '#ff0000'
  })
  .build();
await fWorksheet.insertChart(chartInfo);

setYAxisTextStyle(textStyle: IChartTextStyle): this

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

// Create a line chart with data source A1:D6
// The starting position is upper-left corner of cell B2.
// The y-axis style is set.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setYAxisTextStyle({
    content: 'yAxis Title text',
    fontSize: 12,
    fontColor: '#ff0000'
  })
  .build();
await fWorksheet.insertChart(chartInfo);

setRightYAxisTextStyle(textStyle: IChartTextStyle): this

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

// Create a line chart with data source A1:D6
// The starting position is upper-left corner of cell B2.
// The right y-axis style is set.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setRightYAxisTextStyle({
    content: 'rightYAxis Title text',
    fontSize: 12,
    fontColor: '#ff0000'
  })
  .build();
await fWorksheet.insertChart(chartInfo);

setInvalidValueStrategy(invalidValueType: InvalidValueType): this

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

// Create a line chart with data source A1:D6
// The starting position is upper-left corner of cell B2.
// The invalid value is set as zero.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setInvalidValueStrategy('zero')
  .build();
await fWorksheet.insertChart(chartInfo);

setAxisPointerStyle(style: IChartBuildOptions['axisPointer']): this

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

// Create a line chart with data source A1:D6
// The starting position is upper-left corner of cell B2.
// The axis pointer style is set.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setAxisPointerStyle({
    indicatorLabelColor: '#ff0000',
    indicatorLineType: univerAPI.Enum.ChartBorderDashType.Solid,
    indicatorLineColor: '#00ff00',
    indicatorLabelTextColor: '#0000ff',
  })
  .build();
await fWorksheet.insertChart(chartInfo);

setAllSeriesStyle(allSeriesStyle: Partial<IAllSeriesStyle>): this

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

// Create a line chart with data source A1:D6
// The starting position is upper-left corner of cell B2.
// The all series style is set.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setAllSeriesStyle({
    rightYAxis: false,
    color: '#ff0000',
    border: {
      color: '#00ff00',
      opacity: 0.5,
      width: 1,
      dashType: univerAPI.Enum.ChartBorderDashType.Solid,
    },
  })
  .build();
await fWorksheet.insertChart(chartInfo);

setSeriesStyle(index: number | string, seriesStyle: ISeriesStyle): this

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

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

// Update the first series style after 3 seconds.
setTimeout(() => {
  const first = fChart.getSeriesData()[0];
  const newChartInfo = fWorksheet.newChart(fChart)
    .setSeriesStyle(first.index, {
      color: '#ff0000',
    })
    .build();
  fWorksheet.updateChart(newChartInfo);
}, 3000);

build(): IChartBuilderInfo

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);

setLineStyle(lineStyle: AreaLineStyle): this

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

// Create a line chart builder with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The line style is set to the step type.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setLineStyle('step')
  .build();
await fWorksheet.insertChart(chartInfo);

setDataPointShape(dataPointShape: LinePointShape): this

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

// Create a line chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The data point shape is set to circle, color is red, and size is 10.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setDataPointShape(univerAPI.Enum.LinePointShape.CIRCLE)
  .setDataPointColor('#ff0000')
  .setDataPointSize(10)
  .build();
await fWorksheet.insertChart(chartInfo);

setDataPointColor(dataPointColor: string): this

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

// Create a line chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The data point shape is set to circle, color is red, and size is 10.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setDataPointShape(univerAPI.Enum.LinePointShape.CIRCLE)
  .setDataPointColor('#ff0000')
  .setDataPointSize(10)
  .build();
await fWorksheet.insertChart(chartInfo);

setDataPointSize(dataPointSize: number): this

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

// Create a line chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The data point shape is set to circle, color is red, and size is 10.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setDataPointShape(univerAPI.Enum.LinePointShape.CIRCLE)
  .setDataPointColor('#ff0000')
  .setDataPointSize(10)
  .build();
await fWorksheet.insertChart(chartInfo);

build(): IChartBuilderInfo

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

// Create a line chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The line style is set to the step type.
// The data point shape is set to circle, color is red, and size is 10.
const chartInfo = fWorksheet.newChart()
  .asLineChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setLineStyle('step')
  .setDataPointShape(univerAPI.Enum.LinePointShape.CIRCLE)
  .setDataPointColor('#ff0000')
  .setDataPointSize(10)
  .build();
await fWorksheet.insertChart(chartInfo);

setDoughnutHole(doughnutHole: number): this

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

// Create a pie chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The doughnut hole is set to 0.5.
const chartInfo = fWorksheet.newChart()
  .asPieChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setDoughnutHole(0.5)
  .build();
await fWorksheet.insertChart(chartInfo);

setBorderColor(borderColor: string): this

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

// Create a pie chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The border color is set to red.
const chartInfo = fWorksheet.newChart()
  .asPieChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setBorderColor('#ff0000')
  .build();
await fWorksheet.insertChart(chartInfo);

setHasPaddingAngle(hasPaddingAngle: boolean): this

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

// Create a pie chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The pie chart has a padding angle.
const chartInfo = fWorksheet.newChart()
  .asPieChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setHasPaddingAngle(true)
  .build();
await fWorksheet.insertChart(chartInfo);

setIsHalfPie(isHalfPie: boolean): this

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

// Create a pie chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The pie chart is a half pie chart.
const chartInfo = fWorksheet.newChart()
  .asPieChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setIsHalfPie(true)
  .build();
await fWorksheet.insertChart(chartInfo);

setRosePie(rosePie: boolean): this

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

// Create a pie chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The pie chart is a rose pie chart.
const chartInfo = fWorksheet.newChart()
  .asPieChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setRosePie(true)
  .build();
await fWorksheet.insertChart(chartInfo);

setShowLabelLine(showLabelLine: boolean): this

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

// Create a pie chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The pie chart does not show label lines.
const chartInfo = fWorksheet.newChart()
  .asPieChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setShowLabelLine(false)
  .build();
await fWorksheet.insertChart(chartInfo);

build(): IChartBuilderInfo

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

// Create a pie chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The doughnut hole is set to 0.5.
// The border color is set to red.
// The pie chart has a padding angle.
// The pie chart is a half pie chart.
const chartInfo = fWorksheet.newChart()
  .asPieChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setDoughnutHole(0.5)
  .setBorderColor('#ff0000')
  .setHasPaddingAngle(true)
  .setIsHalfPie(true)
  .build();
await fWorksheet.insertChart(chartInfo);

setShape(shape: RadarShape): this

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

// Create a radar chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The shape of the radar chart is set to polygon and filled with red color.
const chartInfo = fWorksheet.newChart()
  .asRadarChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setShape(univerAPI.Enum.RadarShape.Polygon)
  .setFill(true)
  .build();
await fWorksheet.insertChart(chartInfo);

setFill(fill: boolean): this

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

// Create a radar chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The shape of the radar chart is set to polygon and filled with red color.
const chartInfo = fWorksheet.newChart()
  .asRadarChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setShape(univerAPI.Enum.RadarShape.Polygon)
  .setFill(true)
  .build();
await fWorksheet.insertChart(chartInfo);

build(): IChartBuilderInfo

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

// Create a radar chart with data source A1:D6.
// The starting position is upper-left corner of cell B2.
// The shape of the radar chart is set to polygon and filled with red color.
const chartInfo = fWorksheet.newChart()
  .asRadarChart()
  .addRange('A1:D6')
  .setPosition(1, 1, 0, 0)
  .setShape(univerAPI.Enum.RadarShape.Polygon)
  .setFill(true)
  .build();
await fWorksheet.insertChart(chartInfo);