@univerjs-pro/sheets-chart-ui 0.6.3 → 0.6.4

package/lib/types/facade/chart-builder/chart-builder-base.d.ts

@@ -295,19 +295,6 @@ export declare class FChartBuilderBase extends FBase {
      * @description The chart type of the chart this builder modifies. The chart type (ChartTypeBits) can be found from package @univerjs-pro/sheets-chart.
      * Please pay attention to the type of the chart you are creating,  a Pie chart have a property of Doughnut is donut chart, and a Pie chart have a property of Rose is rose pie chart.But the chart builder will not change the chart type to the corresponding chart type.
      * @returns {ChartTypeBits} ChartType - The chart type of the chart this builder modifies.
-     *
-     * @example
-     * ```ts
-     * 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.
-     * }
-     * ```
      */
     getChartType(): ChartTypeBits;
     /**
@@ -318,15 +305,16 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * 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')
+     * 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();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     addRange(range: IRange | string): this;
@@ -347,14 +335,16 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * 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)
-     *   // 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.
+     *   .addRange('A1:D6')
      *   .setPosition(2, 5, 20, 20)
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setPosition(anchorRowPos: number, anchorColPos: number, rowOffset: number, columnOffset: number): this;
@@ -368,14 +358,16 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * 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)
-     *   // set the chart's top left-hand corner is at (100, 200) pixels.
+     *   .addRange('A1:D6')
      *   .setAbsolutePosition(100, 200)
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setAbsolutePosition(x: number, y: number): this;
@@ -388,17 +380,27 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * 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();
-     * fSheet.insertChart(chartInfo);
-     * // update chart type to line
-     * const updateBuilder = fSheet.newChart();
-     * const updateChartInfo = updateBuilder.setChartType(univerAPI.Enum.ChartType.Line).build();
-     * fSheet.updateChart(updateChartInfo);
+     * 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);
      * ```
      */
     setChartType(chartType: ChartTypeBits): this;
@@ -406,12 +408,48 @@ export declare class FChartBuilderBase extends FBase {
      * Sets the width of the chart in pixels.
      * @param {number} width The width of the chart in pixels.
      * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
+     * @example
+     * ```ts
+     * 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);
+     * ```
      */
     setWidth(width: number): this;
     /**
      * Sets the height of the chart in pixels.
      * @param {number} height The height of the chart in pixels.
      * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
+     * @example
+     * ```ts
+     * 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;
     /**
@@ -425,7 +463,6 @@ export declare class FChartBuilderBase extends FBase {
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fWorkSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fWorkSheet.newChart().asPieChart();
-     *
      * const chartBuilderInfo1 = chartBuilder
      *   .addRange('A1:D6')
      *   .setOptions('title.content', 'Chart Title')
@@ -453,9 +490,9 @@ export declare class FChartBuilderBase extends FBase {
      *     }
      *   })
      *   .build();
-     * fWorkSheet.insertChart(chartBuilderInfo1);
+     * await fWorkSheet.insertChart(chartBuilderInfo1);
      * // or they are same effect
-     * // fWorkSheet.insertChart(chartBuilderInfo2);
+     * // await fWorkSheet.insertChart(chartBuilderInfo2);
      * ```
      */
     setOptions(optionPath: string, optionVal: unknown): this;
@@ -467,15 +504,19 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * 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();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setTransposeRowsAndColumns(transposeRowsAndColumns: boolean): this;
@@ -487,14 +528,48 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(univerAPI.Enum.ChartType.Column)
+     * 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('univer1')
+     *   .setTheme('myTheme')
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setTheme(theme: string): this;
@@ -506,14 +581,18 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * 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();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setXAxisTitle(title: string): this;
@@ -525,14 +604,18 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     * 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();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setYAxisTitle(title: string): this;
@@ -544,14 +627,18 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     * 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();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setRightYAxisTitle(title: string): this;
@@ -563,14 +650,22 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * 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' })
+     *   .setXAxisTextStyle({
+     *     content: 'xAxis Title text',
+     *     fontSize: 12,
+     *     fontColor: '#ff0000'
+     *   })
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setXAxisTextStyle(textStyle: IChartTextStyle): this;
@@ -582,14 +677,22 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     * 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' })
+     *   .setYAxisTextStyle({
+     *     content: 'yAxis Title text',
+     *     fontSize: 12,
+     *     fontColor: '#ff0000'
+     *   })
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setYAxisTextStyle(textStyle: IChartTextStyle): this;
@@ -601,10 +704,14 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     * 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',
@@ -612,7 +719,7 @@ export declare class FChartBuilderBase extends FBase {
      *     fontColor: '#ff0000'
      *   })
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setRightYAxisTextStyle(textStyle: IChartTextStyle): this;
@@ -625,14 +732,18 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     * 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)
-     *   .setInvalidValueAs(InvalidValueType.Zero)
+     *   .setInvalidValueStrategy('zero')
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setInvalidValueStrategy(invalidValueType: InvalidValueType): this;
@@ -649,23 +760,27 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     * 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: ChartBorderDashType.Solid,
+     *     indicatorLineType: univerAPI.Enum.ChartBorderDashType.Solid,
      *     indicatorLineColor: '#00ff00',
      *     indicatorLabelTextColor: '#0000ff',
      *   })
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      *
      * // a AxisPointerStyle can be defined like following:
-     *  const chartInfo = chartBuilder.setOptions('axisPointer.indicatorLineColor', '#ff0000')
-     *   .setOptions('axisPointer.indicatorLineType', ChartBorderDashType.Solid)
+     * const chartInfo = fWorksheet.newChart().setOptions('axisPointer.indicatorLineColor', '#ff0000')
+     *   .setOptions('axisPointer.indicatorLineType', univerAPI.Enum.ChartBorderDashType.Solid)
      *   .setOptions('axisPointer.indicatorLineColor', '#00ff00')
      *   .setOptions('axisPointer.indicatorLabelTextColor', '#0000ff')
      *   .build();
@@ -693,25 +808,27 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     * 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({
-     *     chartType: ChartTypeBits.Line,
+     *   .setAllSeriesStyle({
      *     rightYAxis: false,
      *     color: '#ff0000',
-     *     fillOpacity: 0.5,
      *     border: {
      *       color: '#00ff00',
      *       opacity: 0.5,
      *       width: 1,
-     *       dashType: ChartBorderDashType.Solid,
+     *       dashType: univerAPI.Enum.ChartBorderDashType.Solid,
      *     },
      *   })
      *   .build();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     setAllSeriesStyle(allSeriesStyle: Partial<IAllSeriesStyle>): this;
@@ -725,22 +842,27 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * 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
+     * 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(() => {
-     *   if (fChart) {
-     *     const chartBuilder = fSheet.newChart(fChart);
-     *     // get the series data
-     *     const first = fChart.getSeriesData()[0];
-     *     chartBuilder.setSeriesStyle(first.index, {
+     *   const first = fChart.getSeriesData()[0];
+     *   const newChartInfo = fWorksheet.newChart(fChart)
+     *     .setSeriesStyle(first.index, {
      *       color: '#ff0000',
-     *     }).build();
-     *     fSheet.updateChart(chartBuilder);
-     *    }
-     * },1000);
+     *     })
+     *     .build();
+     *   fWorksheet.updateChart(newChartInfo);
+     * }, 3000);
      * ```
      */
     setSeriesStyle(index: number | string, seriesStyle: ISeriesStyle): this;
@@ -752,15 +874,19 @@ export declare class FChartBuilderBase extends FBase {
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
-     * const fSheet = fWorkbook.getActiveSheet();
-     * const chartBuilder = fSheet.newChart();
-     * const chartInfo = chartBuilder.addRange('A1:D6')
+     * 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();
-     * fSheet.insertChart(chartInfo);
+     * await fWorksheet.insertChart(chartInfo);
      * ```
      */
     build(): IChartBuilderInfo;