@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/brushes/scatterSeries.js

@@ -0,0 +1,125 @@
+import { circle, pathRect } from "./basic";
+import { polygon } from "./polygon";
+import { fillStyle } from "../helpers/style";
+function regularPolygon(ctx, model) {
+    const { numberOfSides, size, x, y, borderColor, borderWidth, fillColor } = model;
+    const s = size / 2;
+    const shift = numberOfSides % 2 ? (Math.PI / 180.0) * (10 + (numberOfSides - 3) / 2) * numberOfSides : 0;
+    const step = (2 * Math.PI) / numberOfSides;
+    ctx.beginPath();
+    for (let i = 0; i <= numberOfSides; i += 1) {
+        const curStep = i * step + shift;
+        ctx.lineTo(x + s * Math.cos(curStep), y + s * Math.sin(curStep));
+    }
+    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = borderWidth;
+    fillStyle(ctx, fillColor);
+    ctx.stroke();
+    ctx.closePath();
+}
+// https://programmingthomas.wordpress.com/2012/05/16/drawing-stars-with-html5-canvas/
+function star(ctx, model) {
+    const { x, y, borderColor, borderWidth, size, fillColor } = model;
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.fillStyle = fillColor;
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(x, y);
+    ctx.moveTo(0, -size);
+    for (let i = 0; i < 5; i += 1) {
+        ctx.rotate(Math.PI / 5);
+        ctx.lineTo(0, -size / 2);
+        ctx.rotate(Math.PI / 5);
+        ctx.lineTo(0, -size);
+    }
+    ctx.fill();
+    ctx.stroke();
+    ctx.restore();
+    ctx.closePath();
+}
+function cross(ctx, model) {
+    const { x, y, borderColor, borderWidth, size, fillColor } = model;
+    const quarter = size / 4;
+    const half = size / 2;
+    const xPointsOffset = [
+        -half,
+        -half,
+        -quarter,
+        -quarter,
+        quarter,
+        quarter,
+        half,
+        half,
+        quarter,
+        quarter,
+        -quarter,
+        -quarter,
+    ];
+    const yPointsOffset = [];
+    for (let idx = 0, len = xPointsOffset.length; idx < len; idx += 1) {
+        const startIdx = 9;
+        yPointsOffset.push(xPointsOffset[(startIdx + idx) % len]);
+    }
+    polygon(ctx, {
+        type: 'polygon',
+        lineWidth: borderWidth,
+        color: borderColor,
+        points: xPointsOffset.map((val, idx) => ({ x: x + val, y: y + yPointsOffset[idx] })),
+        fillColor,
+    });
+}
+function getNumberOfSidesByIconType(iconType) {
+    switch (iconType) {
+        case 'triangle':
+            return 3;
+        case 'diamond':
+            return 4;
+        case 'pentagon':
+            return 5;
+        case 'hexagon':
+            return 6;
+    }
+}
+export function scatterSeries(ctx, model) {
+    const { x, y, borderColor, borderWidth, fillColor, iconType, size } = model;
+    const commonModel = { x, y, fillColor, borderColor, borderWidth, size };
+    ctx.beginPath();
+    switch (iconType) {
+        case 'rect':
+            pathRect(ctx, {
+                type: 'pathRect',
+                x: x - size / 2,
+                y: y - size / 2,
+                width: size,
+                height: size,
+                stroke: borderColor,
+                lineWidth: borderWidth,
+                fill: fillColor,
+            });
+            break;
+        case 'triangle':
+        case 'pentagon':
+        case 'diamond':
+        case 'hexagon':
+            regularPolygon(ctx, Object.assign({ type: 'regularPolygon', numberOfSides: getNumberOfSidesByIconType(iconType) }, commonModel));
+            break;
+        case 'star':
+            star(ctx, Object.assign(Object.assign({ type: 'star' }, commonModel), { size: size / 2 }));
+            break;
+        case 'cross':
+            cross(ctx, Object.assign({ type: 'cross' }, commonModel));
+            break;
+        default:
+            circle(ctx, {
+                type: 'circle',
+                x,
+                y,
+                radius: size / 2,
+                style: [{ strokeStyle: borderColor, lineWidth: borderWidth }],
+                color: fillColor,
+            });
+    }
+    ctx.stroke();
+    ctx.closePath();
+}

package/dist/esm/brushes/sector.d.ts

@@ -0,0 +1,2 @@
+import { SectorModel } from "../../types/components/series";
+export declare function sector(ctx: CanvasRenderingContext2D, sectorModel: SectorModel): void;

package/dist/esm/brushes/sector.js

@@ -0,0 +1,54 @@
+import { makeStyleObj, fillStyle } from "../helpers/style";
+import { calculateDegreeToRadian, getRadialPosition, DEGREE_360 } from "../helpers/sector";
+export function sector(ctx, sectorModel) {
+    const { degree: { start, end }, color, style, lineWidth, } = sectorModel;
+    if (start === end) {
+        return;
+    }
+    const isCircle = Math.abs(start - end) === DEGREE_360;
+    ctx.beginPath();
+    if (style) {
+        const styleObj = makeStyleObj(style, {});
+        Object.keys(styleObj).forEach((key) => {
+            ctx[key] = styleObj[key];
+        });
+    }
+    if (isCircle) {
+        drawCircle(ctx, sectorModel);
+    }
+    else {
+        drawSector(ctx, sectorModel);
+    }
+    ctx.closePath();
+    fillStyle(ctx, color);
+    if (lineWidth) {
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+    }
+}
+function drawSector(ctx, sectorModel) {
+    const { x, y, radius: { inner, outer }, degree: { start, end }, clockwise, drawingStartAngle, } = sectorModel;
+    if (inner < 0 || outer < 0) {
+        return;
+    }
+    const startRadian = calculateDegreeToRadian(start, drawingStartAngle);
+    const endRadian = calculateDegreeToRadian(end, drawingStartAngle);
+    if (!inner) {
+        ctx.moveTo(x, y);
+    }
+    ctx.arc(x, y, outer, startRadian, endRadian, !clockwise);
+    if (inner) {
+        ctx.arc(x, y, inner, endRadian, startRadian, clockwise);
+    }
+}
+function drawCircle(ctx, sectorModel) {
+    const { x, y, radius: { inner, outer }, clockwise, } = sectorModel;
+    ctx.arc(x, y, outer, 0, 2 * Math.PI, !clockwise);
+    if (inner) {
+        const { x: innerStartPosX, y: innerStartPosY } = getRadialPosition(x, y, inner, 0);
+        const startX = inner ? innerStartPosX : x;
+        const startY = inner ? innerStartPosY : y;
+        ctx.moveTo(startX, startY);
+        ctx.arc(x, y, inner, 0, 2 * Math.PI, clockwise);
+    }
+}

package/dist/esm/brushes/spectrumLegend.d.ts

@@ -0,0 +1,14 @@
+import { SpectrumLegendModel, SpectrumLegendTooltipModel } from "../../types/components/spectrumLegend";
+export declare const SPECTRUM_LEGEND_LABEL_HEIGHT = 12;
+export declare const spectrumLegendBar: {
+    HEIGHT: number;
+    PADDING: number;
+};
+export declare const spectrumLegendTooltip: {
+    HEIGHT: number;
+    POINT_WIDTH: number;
+    POINT_HEIGHT: number;
+    PADDING: number;
+};
+export declare function spectrumLegend(ctx: CanvasRenderingContext2D, model: SpectrumLegendModel): void;
+export declare function spectrumTooltip(ctx: CanvasRenderingContext2D, model: SpectrumLegendTooltipModel): void;

package/dist/esm/brushes/spectrumLegend.js

@@ -0,0 +1,199 @@
+import { padding } from "../store/layout";
+import { getTextWidth, getMaxLengthLabelWidth } from "../helpers/calculator";
+import { label, bubbleLabel } from "./label";
+import { getBubbleArrowPoints } from "./dataLabel";
+export const SPECTRUM_LEGEND_LABEL_HEIGHT = 12;
+export const spectrumLegendBar = {
+    HEIGHT: 6,
+    PADDING: 5,
+};
+export const spectrumLegendTooltip = {
+    HEIGHT: 28,
+    POINT_WIDTH: 8,
+    POINT_HEIGHT: 6,
+    PADDING: 6,
+};
+function getBarStartPoint(model) {
+    const { align, x: modelX, y: modelY, labels, width } = model;
+    const { PADDING } = spectrumLegendBar;
+    let x, y;
+    if (align === 'top') {
+        x = modelX;
+        y = modelY + SPECTRUM_LEGEND_LABEL_HEIGHT + PADDING;
+    }
+    else if (align === 'bottom') {
+        x = modelX;
+        y = modelY + spectrumLegendTooltip.HEIGHT;
+    }
+    else if (align === 'left') {
+        x = modelX + getMaxLengthLabelWidth(labels) + PADDING;
+        y = modelY + SPECTRUM_LEGEND_LABEL_HEIGHT / 2;
+    }
+    else {
+        x =
+            modelX +
+                width -
+                (getMaxLengthLabelWidth(labels) + padding.X + PADDING * 2 + spectrumLegendBar.HEIGHT);
+        y = modelY + SPECTRUM_LEGEND_LABEL_HEIGHT / 2;
+    }
+    return { x, y };
+}
+function getLabelsStartPoint(model) {
+    const { align, x: modelX, y: modelY, labels, width } = model;
+    let x, y;
+    if (align === 'top') {
+        x = modelX;
+        y = modelY;
+    }
+    else if (align === 'bottom') {
+        x = modelX;
+        y =
+            modelY + spectrumLegendTooltip.HEIGHT + spectrumLegendBar.HEIGHT + spectrumLegendBar.PADDING;
+    }
+    else if (align === 'left') {
+        x = modelX + getMaxLengthLabelWidth(labels);
+        y = modelY;
+    }
+    else {
+        x = modelX + width - getMaxLengthLabelWidth(labels) - padding.X;
+        y = modelY;
+    }
+    return { x, y };
+}
+function getBarSize(width, height, verticalAlign) {
+    const { HEIGHT } = spectrumLegendBar;
+    const barWidth = verticalAlign ? width : HEIGHT;
+    const barHeight = verticalAlign ? HEIGHT : height - SPECTRUM_LEGEND_LABEL_HEIGHT;
+    return { barWidth, barHeight };
+}
+function drawLabels(ctx, model) {
+    const { labels, align, x, y, width, height, verticalAlign } = model;
+    const { barWidth, barHeight } = getBarSize(width, height, verticalAlign);
+    const labelSize = labels.length - 1;
+    const textBaseStyleMap = {
+        left: {
+            textAlign: 'right',
+            textBaseline: 'top',
+        },
+        right: {
+            textAlign: 'left',
+            textBaseline: 'top',
+        },
+        top: {
+            textAlign: 'center',
+            textBaseline: 'top',
+        },
+        bottom: {
+            textAlign: 'center',
+            textBaseline: 'top',
+        },
+    };
+    labels.forEach((text, idx) => {
+        const startX = verticalAlign ? x + (barWidth / labelSize) * idx : x;
+        const startY = verticalAlign ? y : y + (barHeight / labelSize) * idx;
+        label(ctx, {
+            type: 'label',
+            x: startX,
+            y: startY,
+            text,
+            style: ['default', textBaseStyleMap[align]],
+        });
+    });
+}
+function drawBar(ctx, model) {
+    const { width, height, startColor, endColor, x, y, verticalAlign } = model;
+    const { barWidth, barHeight } = getBarSize(width, height, verticalAlign);
+    const gradient = verticalAlign
+        ? ctx.createLinearGradient(x, y, x + barWidth, y)
+        : ctx.createLinearGradient(x, y, x, y + barHeight);
+    gradient.addColorStop(0, startColor);
+    gradient.addColorStop(1, endColor);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(x, y, barWidth, barHeight);
+}
+function getTooltipArrowPoint(model) {
+    const { align, colorRatio, width, height, x, y, labels, verticalAlign } = model;
+    const { barWidth, barHeight } = getBarSize(width, height, verticalAlign);
+    const { PADDING, HEIGHT } = spectrumLegendBar;
+    if (align === 'top') {
+        return {
+            x: x + barWidth * colorRatio,
+            y: y + SPECTRUM_LEGEND_LABEL_HEIGHT + HEIGHT + PADDING * 2,
+        };
+    }
+    if (align === 'bottom') {
+        return {
+            x: x + barWidth * colorRatio,
+            y: y + SPECTRUM_LEGEND_LABEL_HEIGHT + PADDING * 2,
+        };
+    }
+    if (align === 'left') {
+        return {
+            x: x + getMaxLengthLabelWidth(labels) + HEIGHT + PADDING * 2,
+            y: y + barHeight * colorRatio + PADDING,
+        };
+    }
+    if (align === 'right') {
+        return {
+            x: x + width - (getMaxLengthLabelWidth(labels) + padding.X + PADDING * 3 + HEIGHT),
+            y: y + barHeight * colorRatio + PADDING,
+        };
+    }
+}
+export function spectrumLegend(ctx, model) {
+    const labelsStartPoint = getLabelsStartPoint(model);
+    const barStartPoint = getBarStartPoint(model);
+    drawLabels(ctx, Object.assign(Object.assign({}, model), labelsStartPoint));
+    drawBar(ctx, Object.assign(Object.assign({}, model), barStartPoint));
+}
+export function spectrumTooltip(ctx, model) {
+    const { x, y } = getTooltipArrowPoint(model);
+    const { PADDING, POINT_HEIGHT, POINT_WIDTH } = spectrumLegendTooltip;
+    const { align, text, color } = model;
+    const labelWidth = getTextWidth(text);
+    const width = labelWidth + PADDING * 2;
+    const height = SPECTRUM_LEGEND_LABEL_HEIGHT + PADDING * 2;
+    const direction = align;
+    let boxStartX = x;
+    let boxStartY = y;
+    if (align === 'top') {
+        boxStartY += POINT_HEIGHT;
+    }
+    else if (align === 'right') {
+        boxStartX -= width / 2 + POINT_HEIGHT;
+        boxStartY -= height / 2;
+    }
+    else if (align === 'left') {
+        boxStartX += width / 2 + POINT_HEIGHT;
+        boxStartY -= height / 2;
+    }
+    else if (align === 'bottom') {
+        boxStartY -= height + POINT_HEIGHT;
+    }
+    const points = getBubbleArrowPoints(align, { x, y }, { visible: true, width: POINT_WIDTH, height: POINT_HEIGHT });
+    bubbleLabel(ctx, {
+        type: 'bubbleLabel',
+        bubble: {
+            x: boxStartX - width / 2,
+            y: boxStartY,
+            width,
+            height,
+            points,
+            direction,
+            fill: color,
+        },
+        label: {
+            text,
+            x: boxStartX,
+            y: boxStartY + height / 2,
+            style: [
+                {
+                    font: 'normal 11px Arial',
+                    fillStyle: '#333333',
+                    textAlign: 'center',
+                    textBaseline: 'middle',
+                },
+            ],
+        },
+    });
+}

package/dist/esm/charts/areaChart.d.ts

@@ -0,0 +1,254 @@
+import Chart from "./chart";
+import { AreaChartOptions, AreaSeriesData, AreaSeriesDataType, AreaSeriesInput, PlotLine, PlotBand } from "../../types/options";
+import { AreaChartProps, SelectSeriesInfo } from "../../types/charts";
+/**
+ * @class
+ * @classdesc Area Chart
+ * @param {Object} props
+ *   @param {HTMLElement} props.el - The target element to create chart.
+ *   @param {Object} props.data - Data for making Area Chart.
+ *     @param {Array<string>} props.data.categories - Categories.
+ *     @param {Array<Object>} props.data.series - Series data.
+ *       @param {string} props.data.series.name - Series name.
+ *       @param {Array<number|Array<number>>} props.data.series.data - Series data.
+ *   @param {Object} [props.options] - Options for making Area Chart.
+ *     @param {Object} [props.options.chart]
+ *       @param {string|Object} [props.options.chart.title] - Chart title text or options.
+ *         @param {string} [props.options.chart.title.text] - Chart title text.
+ *         @param {number} [props.options.chart.title.offsetX] - Offset value to move title horizontally.
+ *         @param {number} [props.options.chart.title.offsetY] - Offset value to move title vertically.
+ *         @param {string} [props.options.chart.title.align] - Chart text align. 'left', 'right', 'center' is available.
+ *       @param {boolean|Object} [props.options.chart.animation] - Whether to use animation and duration when rendering the initial chart.
+ *       @param {number|string} [props.options.chart.width] - Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.
+ *       @param {number|string} [props.options.chart.height] - Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.
+ *     @param {Object} [props.options.series]
+ *       @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
+ *       @param {boolean} [props.options.series.showDot=false] - Whether to show dot or not.
+ *       @param {boolean} [props.options.series.spline=false] - Whether to make spline chart or not.
+ *       @param {boolean} [props.options.series.zoomable=false] - Whether to use zoom feature or not.
+ *       @param {boolean} [props.options.series.rangeSelectable=false] - Whether to use range selection feature or not.
+ *       @param {string} [props.options.series.eventDetectType] - Event detect type. 'near', 'nearest', 'grouped', 'point' is available.
+ *       @param {boolean} [props.options.series.shift=false] - Whether to use shift when addData or not.
+ *       @param {Object} [props.options.series.dataLabels] - Set the visibility, location, and formatting of dataLabel. For specific information, refer to the {@link https://github.com/nhn/tui.chart|DataLabels guide} on github.
+ *       @param {boolean|Object} [props.options.series.stack] - Option to decide whether to use stack chart and type of stack chart. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Area Chart guide} on github.
+ *     @param {Object} [props.options.xAxis]
+ *       @param {string|Object} [props.options.xAxis.title] - Axis title.
+ *       @param {boolean} [props.options.xAxis.pointOnColumn=false] - Whether to move the start of the chart to the center of the column.
+ *       @param {boolean} [props.options.xAxis.rotateLabel=true] - Whether to allow axis label rotation.
+ *       @param {boolean|Object} [props.options.xAxis.date] - Whether the x axis label is of date type. Format option used for date type. Whether the x axis label is of date type. If use date type, format option used for date type.
+ *       @param {Object} [props.options.xAxis.tick] - Option to adjust tick interval.
+ *       @param {Object} [props.options.xAxis.label] - Option to adjust label interval.
+ *       @param {Object} [props.options.xAxis.scale] - Option to adjust axis minimum, maximum, step size.
+ *       @param {number} [props.options.xAxis.width] - Width of xAxis.
+ *       @param {number} [props.options.xAxis.height] - Height of xAxis.
+ *     @param {Object|Array<Object>} [props.options.yAxis] - If this option is an array type, use the secondary y axis.
+ *       @param {string|Object} [props.options.yAxis.title] - Axis title.
+ *       @param {Object} [props.options.yAxis.tick] - Option to adjust tick interval.
+ *       @param {Object} [props.options.yAxis.label] - Option to adjust label interval.
+ *       @param {Object} [props.options.yAxis.scale] - Option to adjust axis minimum, maximum, step size.
+ *       @param {number} [props.options.yAxis.width] - Width of yAxis.
+ *       @param {number} [props.options.yAxis.height] - Height of yAxis.
+ *     @param {Object} [props.options.plot]
+ *       @param {number} [props.options.plot.width] - Width of plot.
+ *       @param {number} [props.options.plot.height] - Height of plot.
+ *       @param {boolean} [props.options.plot.visible] - Whether to show plot line.
+ *       @param {Array<Object>} [props.options.plot.lines] - Plot lines information. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Plot guide} on github.
+ *       @param {Array<Object>} [props.options.plot.bands] - Plot bands information. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Plot guide} on github.
+ *     @param {Object} [props.options.legend]
+ *       @param {string} [props.options.legend.align] - Legend align. 'top', 'bottom', 'right', 'left' is available.
+ *       @param {string} [props.options.legend.showCheckbox] - Whether to show checkbox.
+ *       @param {boolean} [props.options.legend.visible] - Whether to show legend.
+ *       @param {number} [props.options.legend.width] - Width of legend.
+ *       @param {Object} [props.options.legend.item] - `width` and `overflow` options of the legend item. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Legend guide} on github.
+ *     @param {Object} [props.options.exportMenu]
+ *       @param {boolean} [props.options.exportMenu.visible] - Whether to show export menu.
+ *       @param {string} [props.options.exportMenu.filename] - File name applied when downloading.
+ *     @param {Object} [props.options.tooltip]
+ *       @param {number} [props.options.tooltip.offsetX] - Offset value to move title horizontally.
+ *       @param {number} [props.options.tooltip.offsetY] - Offset value to move title vertically.
+ *       @param {Function} [props.options.tooltip.formatter] - Function to format data value.
+ *       @param {Function} [props.options.tooltip.template] - Function to create custom template. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Tooltip guide} on github.
+ *     @param {Object} [props.options.responsive] - Rules for changing chart options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Responsive guide} on github.
+ *       @param {boolean|Object} [props.options.responsive.animation] - Animation duration when the chart is modified.
+ *       @param {Array<Object>} [props.options.responsive.rules] - Rules for the Chart to Respond.
+ *     @param {Object} [props.options.lang] - Options for changing the text displayed on the chart or i18n languages.
+ *       @param {Object} [props.options.lang.noData] - No Data Layer Text.
+ *     @param {Object} [props.options.theme] - Chart theme options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Area Chart guide} on github.
+ *       @param {Object} [props.options.theme.chart] - Chart font theme.
+ *       @param {Object} [props.options.theme.noData] - No Data Layer Text theme.
+ *       @param {Object} [props.options.theme.series] - Series theme.
+ *       @param {Object} [props.options.theme.title] - Title theme.
+ *       @param {Object} [props.options.theme.xAxis] - X Axis theme.
+ *       @param {Object|Array<Object>} [props.options.theme.yAxis] - Y Axis theme. In the case of an arrangement, the first is the main axis and the second is the theme for the secondary axis.
+ *       @param {Object} [props.options.theme.legend] - Legend theme.
+ *       @param {Object} [props.options.theme.tooltip] - Tooltip theme.
+ *       @param {Object} [props.options.theme.plot] - Plot theme.
+ *       @param {Object} [props.options.theme.exportMenu] - ExportMenu theme.
+ * @extends Chart
+ */
+export default class AreaChart extends Chart<AreaChartOptions> {
+    constructor(props: AreaChartProps);
+    protected initialize(): void;
+    /**
+     * Add data.
+     * @param {Array} data - Array of data to be added.
+     * @param {string} category - Category to be added.
+     * @api
+     * @example
+     * chart.addData([10, 20], '6');
+     */
+    addData(data: AreaSeriesDataType[], category: string): void;
+    /**
+     * Add series.
+     * @param {Object} data - Data to be added.
+     *   @param {string} data.name - Series name.
+     *   @param {Array<number|Array<number>>} data.data - Array of data to be added.
+     * @api
+     * @example
+     * chart.addSeries({
+     *   name: 'newSeries',
+     *   data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110],
+     * });
+     */
+    addSeries(data: AreaSeriesInput): void;
+    /**
+     * Convert the chart data to new data.
+     * @param {Object} data - Data to be set
+     * @api
+     * @example
+     * chart.setData({
+     *   categories: ['1', '2', '3'],
+     *   series: [
+     *     {
+     *       name: 'new series',
+     *       data: [1, 2, 3],
+     *     },
+     *     {
+     *       name: 'new series2',
+     *       data: [4, 5, 6],
+     *     }
+     *   ]
+     * });
+     */
+    setData(data: AreaSeriesData): void;
+    /**
+     * Add plot line.
+     * @param {Object} data - Plot info.
+     *   @param {string|number} data.value - The value where the plot line will be drawn.
+     *   @param {string} data.color - Plot line color.
+     *   @param {string} [data.id] - Plot id. The value on which the removePlotLine is based.
+     * @api
+     * @example
+     * chart.addPlotLine({
+     *   value: 2,
+     *   color: '#00ff22',
+     *   id: 'plot-1',
+     * });
+     */
+    addPlotLine(data: PlotLine): void;
+    /**
+     * Remove plot line with id.
+     * @param {string} id - Id of the plot line to be removed.
+     * @api
+     * @example
+     * chart.removePlotLine('plot-1');
+     */
+    removePlotLine(id: string): void;
+    /**
+     * Add plot band.
+     * @param {Object} data - Plot info.
+     * @param {Array<string|number>} data.range - The range to be drawn.
+     * @param {string} data.color - Plot band color.
+     * @param {string} [data.id] - Plot id. The value on which the removePlotBand is based.
+     * @api
+     * @example
+     * chart.addPlotBand({
+     *   value: [2, 4],
+     *   color: '#00ff22',
+     *   id: 'plot-1',
+     * });
+     */
+    addPlotBand(data: PlotBand): void;
+    /**
+     * Remove plot band with id.
+     * @param {string} id - id of the plot band to be removed.
+     * @api
+     * @example
+     * chart.removePlotBand('plot-1');
+     */
+    removePlotBand(id: string): void;
+    /**
+     * Hide series data label.
+     * @api
+     * @example
+     * chart.hideSeriesDataLabel();
+     */
+    hideSeriesDataLabel(): void;
+    /**
+     * Show series data label.
+     * @api
+     * @example
+     * chart.showSeriesDataLabel();
+     */
+    showSeriesDataLabel(): void;
+    /**
+     * Convert the chart options to new options.
+     * @param {Object} options - Chart options.
+     * @api
+     * @example
+     * chart.setOptions({
+     *   chart: {
+     *     width: 500,
+     *     height: 'auto',
+     *     title: 'Energy Usage',
+     *   },
+     *   xAxis: {
+     *     title: 'Month',
+     *     date: { format: 'yy/MM' },
+     *   },
+     *   yAxis: {
+     *     title: 'Energy (kWh)',
+     *   },
+     *   series: {
+     *     selectable: true,
+     *   },
+     *   tooltip: {
+     *     formatter: (value) => `${value}kWh`,
+     *   },
+     * });
+     */
+    setOptions(options: AreaChartOptions): void;
+    /**
+     * Update chart options.
+     * @param {Object} options - Chart options.
+     * @api
+     * @example
+     * chart.updateOptions({
+     *   chart: {
+     *     height: 'auto',
+     *     title: 'Energy Usage',
+     *   },
+     *   tooltip: {
+     *     formatter: (value) => `${value}kWh`,
+     *   },
+     * });
+     */
+    updateOptions(options: AreaChartOptions): void;
+    /**
+     * Show tooltip.
+     * @param {Object} seriesInfo - Information of the series for the tooltip to be displayed.
+     *      @param {number} seriesInfo.index - Index of data within series. If 'series.eventDetectType' is "grouped", only seriesIndex is needed.
+     *      @param {number} [seriesInfo.seriesIndex] - Index of series.
+     * @api
+     * @example
+     * chart.showTooltip({index: 1, seriesIndex: 2});
+     */
+    showTooltip(seriesInfo: SelectSeriesInfo): void;
+    /**
+     * Hide tooltip.
+     * @api
+     * @example
+     * chart.hideTooltip();
+     */
+    hideTooltip(): void;
+}