@univerjs-pro/sheets-chart-ui 0.5.4 → 0.5.5-experimental.20250123-34738ff

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

@@ -1,18 +1,57 @@
 import { AreaLineStyle, AxisAlignEnum, ChartBorderDashType, ChartTypeBits, IAllSeriesStyle, IAxisOptions, InvalidValueType, ISeriesStyle, LabelAlignEnum, LegendPositionEnum, RadarShape, SelectModeEnum, TitlePositionEnum } from '@univerjs-pro/sheets-chart';
 import { Injector, IRange, Workbook, FBase } from '@univerjs/core';
+/**
+ * The chart builder info.
+ */
 export interface IChartBuilderInfo {
+    /**
+     * @property {string} unitId The unit id of the chart.
+     */
     unitId: string;
+    /**
+     * @property {string} subUnitId The sub unit id of the chart.
+     */
     subUnitId: string;
+    /**
+     * @property {string} chartId The chart id of the chart.
+     */
     chartId: string;
+    /**
+     * @property {IRange} range The range of the chart.
+     */
     range: IRange | undefined;
+    /**
+     * @property {number} x The x-coordinate of the chart.
+     */
     x: number;
+    /**
+     * @property {number} y The y-coordinate of the chart.
+     */
     y: number;
+    /**
+     * @property {number} width The width of the chart.
+     */
     width: number;
+    /**
+     * @property {number} height The height of the chart.
+     */
     height: number;
+    /**
+     * @property {ChartTypeBits} chartType The chart type of the chart.
+     */
     chartType: ChartTypeBits;
+    /**
+     * @property {IChartBuildOptions} options The options of the chart.
+     */
     options: IChartBuildOptions;
+    /**
+     * @property {boolean} isRowDirection Whether to read the data in the range as row direction.
+     */
     isRowDirection: boolean;
 }
+/**
+ * The chart text style.
+ */
 export interface IChartTextStyle {
     /**
      * @property {string} [titleContent] The content of the chart title.
@@ -43,6 +82,9 @@ export interface IChartTextStyle {
      */
     axisAlignment?: AxisAlignEnum;
 }
+/**
+ * The chart build options.
+ */
 export interface IChartBuildOptions {
     /**
      * @property {string} [title] The title of the chart.
@@ -88,6 +130,7 @@ export interface IChartBuildOptions {
     };
     /**
      * @property {string} [xAxisTitle] The x-axis title of the chart.
+     *
      * @example
      * ```ts
      * chartBuilder.setOptions('xAxisTitle.content', 'xAxis Title text')
@@ -106,9 +149,21 @@ export interface IChartBuildOptions {
      * @property {string} [rightYAxisTitle] The right y-axis title of the chart.
      */
     rightYAxisTitle?: IChartTextStyle;
+    /**
+     * @property {IAxisOptions} [xAxis] The x-axis option of the chart.
+     */
     xAxis?: IAxisOptions;
+    /**
+     * @property {IAxisOptions} [yAxis] The y-axis option of the chart.
+     */
     yAxis?: IAxisOptions;
+    /**
+     * @property {IAxisOptions} [yRightAxis] The right y-axis option of the chart.
+     */
     yRightAxis?: IAxisOptions;
+    /**
+     * The axis pointer of the chart.
+     */
     axisPointer?: {
         /**
          * @property {string} [indicatorLineType] The line type of the axis pointer.
@@ -127,7 +182,13 @@ export interface IChartBuildOptions {
          */
         indicatorLabelTextColor?: string;
     };
+    /**
+     * @property {IAllSeriesStyle} [allSeriesStyle] The style of all series.
+     */
     allSeriesStyle?: Partial<IAllSeriesStyle>;
+    /**
+     * @property {string} [seriesStyleMap] The style of the series.
+     */
     seriesStyleMap?: {
         [id: string]: ISeriesStyle;
     };
@@ -137,30 +198,95 @@ export interface IChartBuildOptions {
     area?: {
         lineStyle: AreaLineStyle;
     };
+    /**
+     * @property {string} [backgroundColor] The background color of the chart.
+     */
     backgroundColor?: string;
+    /**
+     * @property {string} [borderColor] The border color of the chart.
+     */
     borderColor?: string;
+    /**
+     * @property {boolean} [gradientFill] Whether to fill the chart with a gradient.
+     */
     gradientFill?: boolean;
+    /**
+     * @property {string} [theme] The theme of the chart.
+     */
     theme?: string;
+    /**
+     * @property {InvalidValueType} [invalidValueType] The invalid value type of the chart.
+     */
     invalidValueType?: InvalidValueType;
+    /**
+     * @property {RadarShape} [radar] The radar of the chart.
+     */
     radar?: {
+        /**
+         * @property {RadarShape} [shape] The shape of the radar chart.
+         */
         shape?: RadarShape;
+        /**
+         * @property {boolean} [fill] True if the radar chart is filled; false otherwise.
+         */
         fill?: boolean;
     };
 }
+/**
+ * The base class for chart builder.The chart builder is used to create a chart in the sheet.For line chart , radar chart and pie chart, you use the LineChartBuilder, RadarChartBuilder and PieChartBuilder classes respectively.
+ * @ignore
+ * @hideconstructor
+ */
 export declare class FChartBuilderBase extends FBase {
     protected readonly _workbook: Workbook;
     protected readonly _injector: Injector;
+    /**
+     * @property {string} unitId The unit id of the chart.
+     */
     unitId: string;
+    /**
+     * @property {string} subUnitId The sub unit id of the chart.
+     */
     subUnitId: string;
+    /**
+     * @property {string} chartId The chart id of the chart.
+     */
     chartId: string;
+    /**
+     * @property {IRange} range The source range of the chart.
+     */
     range: IRange | undefined;
+    /**
+     * @property {string} sourceSheetName The source sheet name of the chart.
+     */
     sourceSheetName: string | undefined;
+    /**
+     * @property {number} x The x-coordinate of the chart.
+     */
     x: number;
+    /**
+     * @property {number} y The y-coordinate of the chart.
+     */
     y: number;
+    /**
+     * @property {number} width The width of the chart.
+     */
     width: number;
+    /**
+     * @property {number} height The height of the chart.
+     */
     height: number;
+    /**
+     * @property {ChartTypeBits} chartType The chart type of the chart.
+     */
     chartType: ChartTypeBits;
+    /**
+     * @property {IChartBuildOptions} options The options of the chart.
+     */
     options: IChartBuildOptions;
+    /**
+     * @property {boolean} transposeRowsAndColumns Whether to read the data in the range as row direction.
+     */
     transposeRowsAndColumns: boolean;
     constructor(unitId: string, subUnitId: string, workbook: Workbook, injector: Injector, chartId?: string);
     /**
@@ -168,34 +294,37 @@ 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.
+     *   const chart = charts[0];
+     *   const chartBuilder = chart.getChartBuilder();
+     *   const chartType = chartBuilder.getChartType();
+     *   console.log(chartType); // The chart type of first chart.
      * }
+     * ```
      */
     getChartType(): ChartTypeBits;
     /**
      * Adds a range to the chart this builder modifies
      * @param {IRange | string} range The range string or object to add for chart source data.The should be not a single cell.
      * @returns {FChartBuilderBase} -this builder, for chaining
+     *
      * @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')
-     * .setChartType(ChartTypeBits.Column)
-     * .setPosition(1, 1, 0, 0)
-     * .build();
+     *   // 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);
      * ```
      */
@@ -212,17 +341,18 @@ export declare class FChartBuilderBase extends FBase {
      * @param {number} anchorColPos The chart's left side is anchored in this column.
      * @param {number} rowOffset The chart's top left-hand corner is offset by this many pixels.
      * @param {number} columnOffset The chart's lower left-hand corner is offset by this many pixels.
-     * @returns -this builder, for chaining
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *  .setChartType(ChartTypeBits.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();
+     *   .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);
      * ```
      */
@@ -232,17 +362,18 @@ export declare class FChartBuilderBase extends FBase {
      * @description The chart's start anchor position is the top left-hand corner of the chart. This api is opposite to setPosition.
      * @param {number} x The x-coordinate of the chart's top left-hand corner.
      * @param {number} y The y-coordinate of the chart's top left-hand corner.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     * .setChartType(ChartTypeBits.Column)
-     * // set the chart's top left-hand corner is at (100, 200) pixels.
-     * .setAbsolutePosition(100, 200)
-     * .build();
+     *   .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);
      * ```
      */
@@ -251,20 +382,21 @@ export declare class FChartBuilderBase extends FBase {
      * The type of chart to create.
      * @param {ChartTypeBits} chartType The type of chart to create.Which can be found from package @univerjs-pro/sheets-chart.
      * @description The type of chart to create. The following are the possible values: Line,Column,ColumnStacked,ColumnPercentStacked,Bar,BarStacked,BarPercentStacked,Pie,Doughnut,Area,AreaStacked,AreaPercentStacked,Radar,Scatter,Combination
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(ChartTypeBits.Column)
+     *   .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(ChartTypeBits.Line).build();
+     * const updateChartInfo = updateBuilder.setChartType(univerAPI.Enum.ChartType.Line).build();
      * fSheet.updateChart(updateChartInfo);
      * ```
      */
@@ -272,20 +404,21 @@ 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 -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
      */
     setWidth(width: number): this;
     /**
      * Sets the height of the chart in pixels.
      * @param {number} height The height of the chart in pixels.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
      */
     setHeight(height: number): this;
     /**
      * The options for the chart. This function will overwrite  existing options and merge new options property.
      * @param {string} optionPath The path of the option to set. A '' path means the root of the options object.
-     * @param optionVal The value to set. Undefined value will be ignore , and null means delete the property.If a path is '', the value must be the whole options object.
-     * @returns The builder, for chaining.
+     * @param {object|number|string} optionVal The value to set. Undefined value will be ignore , and null means delete the property.If a path is '', the value must be the whole options object.
+     * @returns {FChartBuilderBase} The builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
@@ -293,31 +426,32 @@ export declare class FChartBuilderBase extends FBase {
      * 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();
+     *   .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('', {
+     *   .addRange('A1:D6')
+     *   .setOptions('', {
      *     "title": {
-     *         "content": "Chart Title"
+     *       "content": "Chart Title"
      *     },
      *     "legend": {
-     *         "position": "right"
+     *       "position": "right"
      *     },
      *     "pie": {
-     *         "doughnutHole": 0.5,
-     *         "hasPaddingAngle": true,
-     *         "isHalfPie": true,
-     *         "rosePie": true
+     *       "doughnutHole": 0.5,
+     *       "hasPaddingAngle": true,
+     *       "isHalfPie": true,
+     *       "rosePie": true
      *     }
-     * }).build();
+     *   })
+     *   .build();
      * fWorkSheet.insertChart(chartBuilderInfo1);
      * // or they are same effect
      * // fWorkSheet.insertChart(chartBuilderInfo2);
@@ -327,18 +461,19 @@ export declare class FChartBuilderBase extends FBase {
     /**
      * Sets whether to transpose the rows and columns of the chart.
      * @param {boolean} transposeRowsAndColumns Whether to transpose the rows and columns of the chart.The default value is false.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     * .setChartType(ChartTypeBits.Column)
-     * .setPosition(1, 1, 0, 0)
-     * // the chart will transpose the rows and columns
-     * .setTransposeRowsAndColumns(true)
-     * .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Column)
+     *   .setPosition(1, 1, 0, 0)
+     *   // the chart will transpose the rows and columns
+     *   .setTransposeRowsAndColumns(true)
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */
@@ -346,17 +481,18 @@ export declare class FChartBuilderBase extends FBase {
     /**
      * Sets the theme of the chart. If the theme name not registered, a default theme will be used.
      * @param {string} theme The theme name of the chart.
-     * @returns -this builder, for chaining.
+     * @returns {{FChartBuilderBase}} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *  .setChartType(ChartTypeBits.Column)
-     *  .setPosition(1, 1, 0, 0)
-     *  .setTheme('univer1')
-     *  .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Column)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setTheme('univer1')
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */
@@ -364,14 +500,15 @@ export declare class FChartBuilderBase extends FBase {
     /**
      * Sets the title of the chart x-axis.
      * @param {string} title The title of the chart x-axis.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *   .setChartType(ChartTypeBits.Column)
+     *   .setChartType(univerAPI.Enum.ChartType.Column)
      *   .setPosition(1, 1, 0, 0)
      *   .setXAxisTitle('xAxis Title text')
      *   .build();
@@ -382,17 +519,18 @@ export declare class FChartBuilderBase extends FBase {
     /**
      * Sets the title of the chart y-axis.
      * @param {string} title The title of the chart y-axis.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *  .setChartType(ChartTypeBits.Line)
-     *  .setPosition(1, 1, 0, 0)
-     *  .setYAxisTitle('yAxis Title text')
-     *  .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setYAxisTitle('yAxis Title text')
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */
@@ -400,17 +538,18 @@ export declare class FChartBuilderBase extends FBase {
     /**
      * Sets the title of the chart right y-axis.
      * @param {string} title The title of the chart right y-axis.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     * .setChartType(ChartTypeBits.Line)
-     * .setPosition(1, 1, 0, 0)
-     * .setRightYAxisTitle('rightYAxis Title text')
-     * .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setRightYAxisTitle('rightYAxis Title text')
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */
@@ -418,17 +557,18 @@ export declare class FChartBuilderBase extends FBase {
     /**
      * Sets the text style for the chart x-axis.
      * @param {IChartTextStyle} textStyle The text style for the chart x-axis.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *  .setChartType(ChartTypeBits.Column)
-     * .setPosition(1, 1, 0, 0)
-     * .setXAxisTextStyle({ content: 'xAxis Title text', fontSize: 12, fontColor: '#ff0000' })
-     * .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Column)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setXAxisTextStyle({ content: 'xAxis Title text', fontSize: 12, fontColor: '#ff0000' })
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */
@@ -436,17 +576,18 @@ export declare class FChartBuilderBase extends FBase {
     /**
      * Sets the text style for the chart y-axis.
      * @param {IChartTextStyle} textStyle The text style for the chart y-axis.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     * .setChartType(ChartTypeBits.Line)
-     * .setPosition(1, 1, 0, 0)
-     * .setYAxisTextStyle({ content: 'yAxis Title text', fontSize: 12, fontColor: '#ff0000' })
-     * .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setYAxisTextStyle({ content: 'yAxis Title text', fontSize: 12, fontColor: '#ff0000' })
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */
@@ -454,17 +595,22 @@ export declare class FChartBuilderBase extends FBase {
     /**
      * Sets the text style for the chart right y-axis. Only works in charts have right y-axis.
      * @param {IChartTextStyle} textStyle The text style for the chart right y-axis.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     * .setChartType(ChartTypeBits.Line)
-     * .setPosition(1, 1, 0, 0)
-     * .setRightYAxisTextStyle({ content: 'rightYAxis Title text', fontSize: 12, fontColor: '#ff0000' })
-     * .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setRightYAxisTextStyle({
+     *     content: 'rightYAxis Title text',
+     *     fontSize: 12,
+     *     fontColor: '#ff0000'
+     *   })
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */
@@ -473,17 +619,18 @@ export declare class FChartBuilderBase extends FBase {
      * Sets how to handle invalid data in the chart.The possible values are 'zero', 'break' & 'link'.
      * @description The default value is 'zero'. It means that invalid data will be treated as zero. 'break' means that the chart will have a gap where the invalid data is. 'link' means that the chart will connect the data points on either side of the invalid data.
      * @param {InvalidValueType} invalidValueType The type of invalid value to use.
-     * @returns -this builder, for chaining.
+     * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     * .setChartType(ChartTypeBits.Line)
-     * .setPosition(1, 1, 0, 0)
-     * .setInvalidValueAs(InvalidValueType.Zero)
-     * .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Line)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setInvalidValueAs(InvalidValueType.Zero)
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */
@@ -497,29 +644,30 @@ export declare class FChartBuilderBase extends FBase {
      * @property {ChartBorderDashType} [indicatorLineType] The line type of the axis pointer.
      * @property {string} [indicatorLineColor] The line width of the axis pointer.
      * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *  .setChartType(ChartTypeBits.Line)
-     *  .setPosition(1, 1, 0, 0)
-     *  .setAxisPointerStyle({
-     *      indicatorLabelColor: '#ff0000',
-     *      indicatorLineType: ChartBorderDashType.Solid,
-     *      indicatorLineColor: '#00ff00',
-     *      indicatorLabelTextColor: '#0000ff',
-     *  })
-     *  .build();
+     *   .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();
+     *   .setOptions('axisPointer.indicatorLineType', ChartBorderDashType.Solid)
+     *   .setOptions('axisPointer.indicatorLineColor', '#00ff00')
+     *   .setOptions('axisPointer.indicatorLabelTextColor', '#0000ff')
+     *   .build();
      * ```
      */
     setAxisPointerStyle(style: IChartBuildOptions['axisPointer']): this;
@@ -540,26 +688,28 @@ export declare class FChartBuilderBase extends FBase {
      * @property {IDataPointStyle} [dataPoints] The data point style of the series.Radar chart does not support this property.
      * @param {allSeriesStyle} allSeriesStyle The style for all series.
      * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *    .setChartType(ChartTypeBits.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();
+     *   .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);
      * ```
      */
@@ -570,26 +720,26 @@ export declare class FChartBuilderBase extends FBase {
      * @param {number | string} index The index of the series to set the style for.
      * @param {ISeriesStyle} seriesStyle The style for the series.
      * @returns {FChartBuilderBase} -this builder, for chaining.
+     *
      * @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
-     *  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);
+     * 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);
      * ```
      */
     setSeriesStyle(index: number | string, seriesStyle: ISeriesStyle): this;
@@ -597,17 +747,18 @@ export declare class FChartBuilderBase extends FBase {
      * Builds the chart to reflect all changes made to it.
      * @description This method does not automatically draw the chart on top of the spreadsheet. A new chart must be inserted via sheet.insertChart(chart), and an existing chart should be updated via sheet.updateChart(chart).
      * @returns {IChartBuilderInfo} -The chart builder info.
+     *
      * @example
      * ```ts
      * const fWorkbook = univerAPI.getActiveWorkbook();
      * const fSheet = fWorkbook.getActiveSheet();
      * const chartBuilder = fSheet.newChart();
      * const chartInfo = chartBuilder.addRange('A1:D6')
-     *    .setChartType(ChartTypeBits.Column)
-     *    .setPosition(1, 1, 0, 0)
-     *    .setWidth(600)
-     *    .setHeight(400)
-     *    .build();
+     *   .setChartType(univerAPI.Enum.ChartType.Column)
+     *   .setPosition(1, 1, 0, 0)
+     *   .setWidth(600)
+     *   .setHeight(400)
+     *   .build();
      * fSheet.insertChart(chartInfo);
      * ```
      */