Class: FChartBuilderBase

addRange(range): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder
  // set the source data range of the chart
  .addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  .setPosition(1, 1, 0, 0)
  .build();
fSheet.insertChart(chartInfo);

asLineChart(): LineChartBuilder

asPieChart(): PieChartBuilder

asRadarChart(): RadarChartBuilder

build(): IChartBuilderInfo

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  .setPosition(1, 1, 0, 0)
  .setWidth(600)
  .setHeight(400)
  .build();
fSheet.insertChart(chartInfo);

clearRange(): this

getChartType(): ChartTypeBits

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const charts = fSheet.getCharts();
if(charts.length > 0) {
  const chart = charts[0];
  const chartBuilder = chart.getChartBuilder();
  const chartType = chartBuilder.getChartType();
  console.log(chartType); // The chart type of first chart.
}

setAbsolutePosition(x, y): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  // set the chart's top left-hand corner is at (100, 200) pixels.
  .setAbsolutePosition(100, 200)
  .build();
fSheet.insertChart(chartInfo);

setAllSeriesStyle(allSeriesStyle): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Line)
  .setPosition(1, 1, 0, 0)
  .setALLSeriesStyle({
    chartType: ChartTypeBits.Line,
    rightYAxis: false,
    color: '#ff0000',
    fillOpacity: 0.5,
    border: {
      color: '#00ff00',
      opacity: 0.5,
      width: 1,
      dashType: ChartBorderDashType.Solid,
    },
  })
  .build();
fSheet.insertChart(chartInfo);

setAxisPointerStyle(style): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Line)
  .setPosition(1, 1, 0, 0)
  .setAxisPointerStyle({
    indicatorLabelColor: '#ff0000',
    indicatorLineType: ChartBorderDashType.Solid,
    indicatorLineColor: '#00ff00',
    indicatorLabelTextColor: '#0000ff',
  })
  .build();
fSheet.insertChart(chartInfo);
 
// a AxisPointerStyle can be defined like following:
 const chartInfo = chartBuilder.setOptions('axisPointer.indicatorLineColor', '#ff0000')
  .setOptions('axisPointer.indicatorLineType', ChartBorderDashType.Solid)
  .setOptions('axisPointer.indicatorLineColor', '#00ff00')
  .setOptions('axisPointer.indicatorLabelTextColor', '#0000ff')
  .build();

setChartType(chartType): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  .setPosition(1, 1, 0, 0)
  .build();
fSheet.insertChart(chartInfo);
// update chart type to line
const updateBuilder = fSheet.newChart();
const updateChartInfo = updateBuilder.setChartType(univerAPI.Enum.ChartType.Line).build();
fSheet.updateChart(updateChartInfo);

setHeight(height): this

setInvalidValueStrategy(invalidValueType): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Line)
  .setPosition(1, 1, 0, 0)
  .setInvalidValueAs(InvalidValueType.Zero)
  .build();
fSheet.insertChart(chartInfo);

setOptions(optionPath, optionVal): 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();
fWorkSheet.insertChart(chartBuilderInfo1);
// or they are same effect
// fWorkSheet.insertChart(chartBuilderInfo2);

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

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  // set the chart's top side is anchored in row 2, left side is anchored in column 5, and the chart's top left-hand corner is offset by 20 pixels.
  .setPosition(2, 5, 20, 20)
  .build();
fSheet.insertChart(chartInfo);

setRightYAxisTextStyle(textStyle): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Line)
  .setPosition(1, 1, 0, 0)
  .setRightYAxisTextStyle({
    content: 'rightYAxis Title text',
    fontSize: 12,
    fontColor: '#ff0000'
  })
  .build();
fSheet.insertChart(chartInfo);

setRightYAxisTitle(title): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Line)
  .setPosition(1, 1, 0, 0)
  .setRightYAxisTitle('rightYAxis Title text')
  .build();
fSheet.insertChart(chartInfo);

setSeriesStyle(index, seriesStyle): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6').setChartType(2).setPosition(1, 1, 0, 0).build();
const fChart = await fSheet.insertChart(chartInfo);
// should wait the chart rendered
setTimeout(() => {
  if (fChart) {
    const chartBuilder = fSheet.newChart(fChart);
    // get the series data
    const first = fChart.getSeriesData()[0];
    chartBuilder.setSeriesStyle(first.index, {
      color: '#ff0000',
    }).build();
    fSheet.updateChart(chartBuilder);
   }
},1000);

setTheme(theme): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  .setPosition(1, 1, 0, 0)
  .setTheme('univer1')
  .build();
fSheet.insertChart(chartInfo);

setTransposeRowsAndColumns(transposeRowsAndColumns): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  .setPosition(1, 1, 0, 0)
  // the chart will transpose the rows and columns
  .setTransposeRowsAndColumns(true)
  .build();
fSheet.insertChart(chartInfo);

setWidth(width): this

setXAxisTextStyle(textStyle): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  .setPosition(1, 1, 0, 0)
  .setXAxisTextStyle({ content: 'xAxis Title text', fontSize: 12, fontColor: '#ff0000' })
  .build();
fSheet.insertChart(chartInfo);

setXAxisTitle(title): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Column)
  .setPosition(1, 1, 0, 0)
  .setXAxisTitle('xAxis Title text')
  .build();
fSheet.insertChart(chartInfo);

setYAxisTextStyle(textStyle): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Line)
  .setPosition(1, 1, 0, 0)
  .setYAxisTextStyle({ content: 'yAxis Title text', fontSize: 12, fontColor: '#ff0000' })
  .build();
fSheet.insertChart(chartInfo);

setYAxisTitle(title): this

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:D6')
  .setChartType(univerAPI.Enum.ChartType.Line)
  .setPosition(1, 1, 0, 0)
  .setYAxisTitle('yAxis Title text')
  .build();
fSheet.insertChart(chartInfo);