import ApexCharts from 'apexcharts'; import { ChartDisplayType } from '../../Types/ChartDisplayType'; import { ChartLegendPosition } from '../../Types/ChartLegendPosition'; import { ChartStackType } from '../../Types/ChartStackType'; import { Fit } from '../../Types/Fit'; import { ChartBaseElement } from './Abstracts/ChartBaseElement'; import type { IChartElementProps } from './IChartElementProps'; declare const ChartElement_base: (abstract new (...args: Array) => import("../../../Controls/Behaviors/Themeable").IThemeableProps) & typeof ChartBaseElement & import("../../../Controls/Behaviors/Themeable").IThemeableCtor; /** * Chart - A comprehensive data visualization component powered by ApexCharts for creating interactive charts and graphs. * * @description * The Chart component enables rich data visualization through multiple chart types including bar, line, area, pie, * donut, and scatter plots. Built on ApexCharts library, it provides extensive customization options for colors, * animations, legends, and interactivity. Perfect for creating compelling data presentations, analytics dashboards, * and real-time monitoring interfaces with responsive design and flexible configuration. * * @name Chart * @element mosaik-chart * @category Charts * * @slot - Default content area for chart data configuration and custom elements * * @csspart chart - Main chart rendering container element * * @cssprop {String} --chart-background-color - Background color for the chart rendering area * @cssprop {String} --chart-font-family - Font family for all chart text elements * @cssprop {String} --chart-font-size - Font size for chart labels and text * @cssprop {String} --chart-font-line-height - Line height for chart text elements * @cssprop {String} --chart-font-weight - Font weight for chart text * @cssprop {String} --chart-font-letter-spacing - Letter spacing for chart text * @cssprop {String} --chart-font-text-decoration - Text decoration style for chart labels * @cssprop {String} --chart-font-text-transform - Text transformation for chart labels * @cssprop {String} --chart-foreground-color - Primary color for text and line elements * * @example * Basic bar chart using only HTML attributes: * ```html * * ``` * * @example * Line chart with legend: * ```html * * ``` * * @example * Pie chart with legend: * ```html * * ``` * * @example * Stacked area chart: * ```html * * ``` * * @example * Chart with fit sizing: * ```html * * ``` * * @public */ export declare class ChartElement extends ChartElement_base implements IChartElementProps { private readonly _defaultOptions; private _host; private _display; private _isLegendVisible; private _legendPosition; private _isXAxisVisible; private _isYAxisVisible; private _stacked; private _stackType; private _chart; private _annotations; private _colors; private _dataLabels; private _series; private _stroke; private _labels; private _legend; private _markers; private _noData; private _fill; private _tooltip; private _plotOptions; private _responsive; private _xAxis; private _yAxis; private _grid; private _states; private _theme; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `display` property. * * @public * @attr display */ get display(): ChartDisplayType; set display(value: ChartDisplayType); /** * Gets or sets the `stacked` property. * * @public * @attr stacked */ get stacked(): boolean; set stacked(value: boolean); /** * Gets or sets the `stackType` property. * * @public * @attr stack-type */ get stackType(): ChartStackType; set stackType(value: ChartStackType); /** * Gets or sets the `isLegendVisible` property. * * @public * @attr is-legend-visible */ get isLegendVisible(): boolean; set isLegendVisible(value: boolean); /** * Gets or sets the `legendPosition` property. * * @public * @attr legend-position */ get legendPosition(): ChartLegendPosition; set legendPosition(value: ChartLegendPosition); /** * Gets or sets the `isXAxisVisible` property. * * @public * @attr is-x-axis-visible */ get isXAxisVisible(): boolean; set isXAxisVisible(value: boolean); /** * Gets or sets the `isYAxisVisible` property. * * @public * @attr is-y-axis-visible */ get isYAxisVisible(): boolean; set isYAxisVisible(value: boolean); /** * Gets or sets the `chart` property. * * @public */ get chart(): ApexCharts.ApexOptions['chart'] | null; set chart(value: ApexCharts.ApexOptions['chart'] | null); /** * Gets or sets the `annotations` property. * * @public */ get annotations(): ApexCharts.ApexOptions['annotations'] | null; set annotations(value: ApexCharts.ApexOptions['annotations'] | null); /** * Gets or sets the `colors` property. * * @public */ get colors(): ApexCharts.ApexOptions['colors'] | null; set colors(value: ApexCharts.ApexOptions['colors'] | null); /** * Gets or sets the `dataLabels` property. * * @public */ get dataLabels(): ApexCharts.ApexOptions['dataLabels'] | null; set dataLabels(value: ApexCharts.ApexOptions['dataLabels'] | null); /** * Gets or sets the `series` property. * * @public */ get series(): ApexCharts.ApexOptions['series'] | null; set series(value: ApexCharts.ApexOptions['series'] | null); /** * Gets or sets the `stroke` property. * * @public */ get stroke(): ApexCharts.ApexOptions['stroke'] | null; set stroke(value: ApexCharts.ApexOptions['stroke'] | null); /** * Gets or sets the `labels` property. * * @public */ get labels(): ApexCharts.ApexOptions['labels'] | null; set labels(value: ApexCharts.ApexOptions['labels'] | null); /** * Gets or sets the `legend` property. * * @public */ get legend(): ApexCharts.ApexOptions['legend'] | null; set legend(value: ApexCharts.ApexOptions['legend'] | null); /** * Gets or sets the `markers` property. * * @public */ get markers(): ApexCharts.ApexOptions['markers'] | null; set markers(value: ApexCharts.ApexOptions['markers'] | null); /** * Gets or sets the `noData` property. * * @public */ get noData(): ApexCharts.ApexOptions['noData'] | null; set noData(value: ApexCharts.ApexOptions['noData'] | null); /** * Gets or sets the `fill` property. * * @public */ get fill(): ApexCharts.ApexOptions['fill'] | null; set fill(value: ApexCharts.ApexOptions['fill'] | null); /** * Gets or sets the `tooltip` property. * * @public */ get tooltip(): ApexCharts.ApexOptions['tooltip'] | null; set tooltip(value: ApexCharts.ApexOptions['tooltip'] | null); /** * Gets or sets the `plotOptions` property. * * @public */ get plotOptions(): ApexCharts.ApexOptions['plotOptions'] | null; set plotOptions(value: ApexCharts.ApexOptions['plotOptions'] | null); /** * Gets or sets the `responsive` property. * * @public */ get responsive(): ApexCharts.ApexOptions['responsive'] | null; set responsive(value: ApexCharts.ApexOptions['responsive'] | null); /** * Gets or sets the `xAxis` property. * * @public */ get xAxis(): ApexCharts.ApexOptions['xaxis'] | null; set xAxis(value: ApexCharts.ApexOptions['xaxis'] | null); /** * Gets or sets the `yAxis` property. * * @public */ get yAxis(): ApexCharts.ApexOptions['yaxis'] | null; set yAxis(value: ApexCharts.ApexOptions['yaxis'] | null); /** * Gets or sets the `grid` property. * * @public */ get grid(): ApexCharts.ApexOptions['grid'] | null; set grid(value: ApexCharts.ApexOptions['grid'] | null); /** * Gets or sets the `states` property. * * @public */ get states(): ApexCharts.ApexOptions['states'] | null; set states(value: ApexCharts.ApexOptions['states'] | null); /** * Gets or sets the `theme` property. * * @public */ get theme(): ApexCharts.ApexOptions['theme'] | null; set theme(value: ApexCharts.ApexOptions['theme'] | null); /** * @protected * @overload */ protected createRenderRoot(): HTMLElement; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected * @override */ protected update(changes: Map): void; protected onFitPropertyChanged(oldValue?: Fit, newValue?: Fit): void; /** * @private */ private updateSize; /** * @private */ private computedOptions; } /** * @public */ export declare namespace ChartElement { type Props = IChartElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-chart': ChartElement; } } export {}; //# sourceMappingURL=ChartElement.d.ts.map