import { ComponentInterface } from '../../stencil-public-runtime';
import * as echarts from 'echarts/core';
import type { ChartData } from 'q2-tecton-common/lib/types/elements';
/**
 * @name Bar Chart
 * @category Data Visualization
 * @summary Use for comparing values across categories with horizontal or vertical bars.
 */
export declare class Q2ChartBar implements ComponentInterface {
    chart: echarts.ECharts;
    chartContainer: HTMLDivElement;
    chartContainerStyles: CSSStyleDeclaration;
    chartFinishedListener: () => void;
    hostElementStyles: CSSStyleDeclaration;
    resizeEventListener: EventListener;
    hostElement: HTMLElement;
    /** Controls alignment of the chart name when its visible. */
    alignChartName: 'left' | 'right' | 'center';
    /**
     * The title of the chart. We recommend always including this for accessibility purposes.
     *
     * It is hidden by default, but can be made visible with the `showChartName` variable.
     * @localizable
     */
    chartName: string;
    /** A subtitile to the chart name. Often used to provide a brief description of what the data represents. */
    chartSubTitle: string;
    /**
     * Controls the color of all bars in the chart. Can be overridden at the individual data point level.
     * Accept variables, hex codes, an CSS color names.
     *
     * **Examples:**
     * @snippet
     * element.areaColor = "#ff0000";
     * element.areaColor = "papayawhip";
     * element.areaColor = "var(--t-accent-1)";
     */
    color: string;
    /** An array of objects that contain the data to be displayed. */
    data: ChartData[];
    /**
     * Allows control of how labels on the name axis will be handled if the text length is wider than the available space.
     * Values will ellipsize if the truncate option is used.
     */
    dataNamesOverflow: 'break' | 'truncate';
    /**
     * Sets width available for labels on the name axis.
     * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.
     */
    dataNamesWidth: number;
    /** Controls whether values on the value axis are shown as numbers or as currency. */
    format: 'currency' | 'default';
    /**
     * Can be used in coordination with the currency format property to control decimal handling.
     * Accepts `Ndec` where N is a number. (e.g. `2dec`)
     */
    formatModifier: string;
    /**
     * Sets chart padding around the grid.
     * Each value in the object will be interpreted as pixels.
     *
     * **Example:**
     * @snippet
     * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };
     */
    gridPadding: {
        left?: number;
        right?: number;
        top?: number;
        bottom?: number;
    };
    /** Controls visibility of labels on the name axis. */
    hideBarLabels: boolean;
    /** Controls visibility of labels on the value axis. */
    hideValueAxisLabels: boolean;
    /**
     * Controls the position of text on the names axis by centering the text to the bar at a 45° angle.
     * Can be used when space is limited or with longer name labels.
     */
    offsetDataNames: boolean;
    /**
     * Controls the position of text on the values axis by centering the text to the bar at a 45° angle.
     * Can be used when space is limited or with longer name labels.
     */
    offsetDataValues: boolean;
    /**
     * Controls which axes are the value and name axes.
     * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.
     * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.
     */
    orientation: 'vertical' | 'horizontal';
    /** Controls the visibility of the chart name at the top of the chart. */
    showChartName: boolean;
    /**
     * By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.
     * When set to `true`, values on the bar will be re-sorted in descending order.
     */
    sort: boolean;
    disconnectedCallback(): void;
    componentDidLoad(): void;
    propsUpdates(): void;
    cacheComputedStyles(): void;
    getColor(color: string): any;
    processData(data: ChartData[]): {
        value: number;
        itemStyle: {
            color: any;
        };
    }[];
    resizeChart(): void;
    setupChartEvents(chart: echarts.ECharts): void;
    updateChart(chart: echarts.ECharts): void;
    render(): any;
}