@fluentui/react-charts 1.2.0 → 9.0.1

package/dist/index.d.ts

@@ -0,0 +1,2143 @@
+/// <reference types="react" />
+
+import * as React_2 from 'react';
+import { SVGProps } from 'react';
+import { TimeLocaleDefinition } from 'd3-time-format';
+
+/**
+ * {@docCategory ChartProps}
+ */
+export declare interface AccessibilityProps {
+    /**
+     * Accessibility aria-label
+     */
+    ariaLabel?: string;
+    /**
+     * Accessibility aria-labelledBy
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Accessibility aria-describedBy
+     */
+    ariaDescribedBy?: string;
+}
+
+export declare interface Basestate {
+    _width?: number;
+    _height?: number;
+    activeLegend?: string;
+    color?: string;
+    dataForHoverCard?: number;
+    isCalloutVisible: boolean;
+    isLegendSelected?: boolean;
+    isLegendHovered?: boolean;
+    refSelected?: any;
+    YValueHover?: {
+        legend?: string;
+        y?: number;
+        color?: string;
+    }[];
+    hoverYValue?: string | number | null;
+    hoverXValue?: string | number | null;
+    xCalloutValue?: string;
+    yCalloutValue?: string;
+    lineColor?: string;
+    hoveredLineColor?: string;
+    selectedLegend?: string;
+    containerWidth?: number;
+    containerHeight?: number;
+}
+
+/**
+ * Cartesian Chart component
+ * {@docCategory CartesianChart}
+ */
+export declare const CartesianChart: React_2.FunctionComponent<ModifiedCartesianChartProps>;
+
+/**
+ * Cartesian Chart properties
+ * {@docCategory CartesianChart}
+ */
+export declare interface CartesianChartProps {
+    /**
+     * Below height used for resizing of the chart
+     * Wrap chart in your container and send the updated height and width to these props.
+     * These values decide wheather chart re render or not. Please check examples for reference
+     */
+    height?: number;
+    /**
+     * Below width used for resizing of the chart
+     * Wrap chart in your container and send the updated height and width to these props.
+     * These values decide wheather chart re render or not. Please check examples for reference
+     */
+    width?: number;
+    /**
+     * this prop takes its parent as a HTML element to define the width and height of the chart
+     */
+    parentRef?: HTMLElement | null;
+    /**
+     * Additional CSS class(es) to apply to the Chart.
+     */
+    className?: string;
+    /**
+     * Margins for the chart
+     * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`
+     * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values
+     */
+    margins?: Margins;
+    /** decides wether to show/hide legends
+     * @defaultvalue false
+     */
+    hideLegend?: boolean;
+    /**
+     * Do not show tooltips in chart
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * this prop takes values that you want the chart to render on x-axis
+     * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you
+     * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart
+     */
+    tickValues?: number[] | Date[] | string[] | undefined;
+    /**
+     * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'
+     * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis
+     * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.
+     */
+    tickFormat?: string;
+    /**
+     * Width of line stroke
+     */
+    strokeWidth?: number;
+    /**
+     * x Axis labels tick padding. This defines the gap between tick labels and tick lines.
+     * @default 10
+     */
+    xAxisTickPadding?: number;
+    /**
+     * the format in for the data on y-axis. For data object this can be specified to your requirement.
+     *  Eg: d3.format(".0%")(0.123),d3.format("+20")(42);
+     * Please look at https://github.com/d3/d3-format for all the formats supported
+     */
+    yAxisTickFormat?: any;
+    /**
+     * Secondary y-scale options
+     * By default this is not defined, meaning there will be no secondary y-scale.
+     */
+    secondaryYScaleOptions?: {
+        /** Minimum value (0 by default) */
+        yMinValue?: number;
+        /** Maximum value (100 by default) */
+        yMaxValue?: number;
+    };
+    /**
+     * minimum  data value point in y-axis
+     */
+    yMinValue?: number;
+    /**
+     * maximum data value point in y-axis
+     */
+    yMaxValue?: number;
+    /**
+     * maximum data value point in x-axis
+     */
+    xMaxValue?: number;
+    /**
+     * Number of ticks on the y-axis.
+     * Tick count should be factor of difference between (yMinValue, yMaxValue)?
+     * @default 4
+     */
+    yAxisTickCount?: number;
+    /**
+     * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.
+     * Does not work for string axis.
+     * @default 6
+     */
+    xAxisTickCount?: number;
+    /**
+     * define the size of the tick lines on the x-axis
+     * @default 10
+     */
+    xAxistickSize?: number;
+    /**
+     * defines the space between the tick line and the data label
+     * @default 10
+     */
+    tickPadding?: number;
+    /**
+     * Url that the data-viz needs to redirect to upon clicking on it
+     */
+    href?: string;
+    legendsOverflowText?: any;
+    /**
+     * Enable the legends to wrap lines if there is not enough space to show all legends on a single line
+     */
+    enabledLegendsWrapLines?: boolean;
+    legendProps?: Partial<LegendsProps>;
+    /**
+     *@default false
+     *Used for to elipse x axis labes and show tooltip on x axis labels
+     */
+    showXAxisLablesTooltip?: boolean;
+    /**
+     * @default 4
+     * Used for X axis labels
+     * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.
+     */
+    noOfCharsToTruncate?: number;
+    /**
+     * @default false
+     * Used to wrap x axis labels values (whole value)
+     */
+    wrapXAxisLables?: boolean;
+    /**
+     * @default false
+     * Used to rotate x axis labels by 45 degrees
+     */
+    rotateXAxisLables?: boolean;
+    /**
+     * The prop used to define the date time localization options
+     */
+    dateLocalizeOptions?: Intl.DateTimeFormatOptions;
+    /**
+     * The prop used to define a custom locale for the date time format.
+     */
+    timeFormatLocale?: TimeLocaleDefinition;
+    /**
+     * The prop used to define a custom datetime formatter for date axis.
+     */
+    customDateTimeFormatter?: (dateTime: Date) => string;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: CartesianChartStyles;
+    /**
+     * Callout customization props
+     */
+    calloutProps?: Partial<ChartPopoverProps>;
+    /**
+     * props for the svg; use this to include aria-* or other attributes on the tag
+     */
+    svgProps?: React_2.SVGProps<SVGSVGElement>;
+    /**
+     * Props related to reflow behavior of the chart
+     */
+    reflowProps?: {
+        /**
+         * Determines the reflow behavior of the chart.
+         * When set to `'min-width'`, the chart will not shrink below a certain width and will enable scrolling if it overflows.
+         * @default 'none'
+         */
+        mode: 'none' | 'min-width';
+    };
+    /**
+     * Prop to set the x axis title
+     * @default undefined
+     * Minimum bottom margin required for x axis title is 55px
+     */
+    xAxisTitle?: string;
+    /**
+     * Prop to set the y axis title
+     * @default undefined
+     * Minimum left margin required for y axis title is 60px and for RTL is 40px
+     * Minimum right margin required for y axis title is 40px and for RTL is 60px
+     */
+    yAxisTitle?: string;
+    /**
+     * Prop to set the secondary y axis title
+     * @default undefined
+     * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px
+     */
+    secondaryYAxistitle?: string;
+    /**
+     * Whether to use UTC time for axis scale, ticks, and the time display in callouts.
+     * When set to `true`, time is displayed equally, regardless of the user's timezone settings.
+     * @default true
+     */
+    useUTC?: string | boolean;
+    /**
+     * Determines whether overlapping x-axis tick labels should be hidden.
+     * @default false
+     */
+    hideTickOverlap?: boolean;
+    /**
+     * Define a custom callout props override
+     */
+    calloutPropsPerDataPoint?: (dataPointCalloutProps: any) => ChartPopoverProps;
+    /**
+     * Optional callback to access the Chart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<Chart>;
+}
+
+/**
+ * Cartesian Chart style properties
+ * {@docCategory CartesianChart}
+ */
+export declare interface CartesianChartStyleProps {
+    /**
+     * Additional CSS class(es) to apply to the Chart.
+     */
+    className?: string;
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * Height of the chart.
+     */
+    height?: number;
+    /**
+     * Color of the chart.
+     */
+    color?: string;
+    /**
+     * Link to redirect if click action for graph
+     */
+    href?: string;
+    /**
+     * prop to check if the chart is selected or hovered upon to determine opacity
+     */
+    shouldHighlight?: boolean;
+    /**
+     * prop to check if the Page is in Rtl
+     */
+    useRtl?: boolean;
+    /**
+     * color of the line
+     */
+    lineColor?: string;
+    /**
+     * boolean flag which determines if shape is drawn in callout
+     */
+    toDrawShape?: boolean;
+}
+
+/**
+ * Cartesian Chart styles
+ * {@docCategory CartesianChart}
+ */
+export declare interface CartesianChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root?: string;
+    /**
+     * Style for the element containing the x-axis.
+     */
+    xAxis?: string;
+    /**
+     * Style for the element containing the y-axis.
+     */
+    yAxis?: string;
+    /**
+     * Style for legend container
+     */
+    legendContainer?: string;
+    /**
+     * line hover box css
+     */
+    hover?: string;
+    /**
+     * styles for callout root-content
+     */
+    calloutContentRoot?: string;
+    /**
+     * styles for callout x-content
+     */
+    calloutContentX?: string;
+    /**
+     * styles for callout y-content
+     */
+    calloutContentY?: string;
+    /**
+     * styles for description message
+     */
+    descriptionMessage?: string;
+    /**
+     * styles for callout Date time container
+     */
+    calloutDateTimeContainer?: string;
+    /**
+     * styles for callout info container
+     */
+    calloutInfoContainer?: string;
+    /**
+     * styles for callout block container
+     */
+    calloutBlockContainer?: string;
+    /**
+     * Styles for callout block container when toDrawShape is false
+     */
+    calloutBlockContainertoDrawShapefalse?: string;
+    /**
+     * Styles for callout block container when toDrawShape is true
+     */
+    calloutBlockContainertoDrawShapetrue?: string;
+    /**
+     * styles for callout legend text
+     */
+    calloutlegendText?: string;
+    /**
+     * styles for tooltip
+     */
+    tooltip?: string;
+    /**
+     * styles for tooltip
+     */
+    axisTitle?: string;
+    /**
+     * Style for the chart Title.
+     */
+    chartTitle?: string;
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover?: string;
+    /**
+     * styles for the shape object in the callout
+     */
+    shapeStyles?: string;
+    /**
+     * Styles for the chart wrapper div
+     */
+    chartWrapper?: string;
+}
+
+/**
+ * {@docCategory Chart}
+ */
+export declare interface Chart {
+    chartContainer: HTMLElement | null;
+}
+
+/**
+ * Chart data mode for chart data text
+ * default: show the datapoint.x value
+ * fraction: show the fraction of datapoint.x/datapoint.y
+ * percentage: show the percentage of (datapoint.x/datapoint.y)%
+ * {@docCategory HorizontalBarChart}
+ */
+export declare type ChartDataMode = 'default' | 'fraction' | 'percentage';
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface ChartDataPoint {
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend?: string;
+    /**
+     * data the datapoint in the chart
+     */
+    data?: number;
+    /**
+     * data the datapoint in the chart
+     */
+    horizontalBarChartdata?: HorizontalDataPoint;
+    /**
+     * onClick action for each datapoint in the chart
+     */
+    onClick?: VoidFunction;
+    /**
+     * Color for the legend in the chart. If not provided, it will fallback on the default color palette.
+     */
+    color?: string;
+    /**
+     * placeholder data point
+     */
+    placeHolder?: boolean;
+    /**
+     * Callout data for x axis
+     * This is an optional prop, If haven;t given legend will take
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Callout data for y axis
+     * This is an optional prop, If haven't given data will take
+     */
+    yAxisCalloutData?: string;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+}
+
+export declare const ChartPopover: React_2.FunctionComponent<ChartPopoverProps>;
+
+export declare interface ChartPopoverProps {
+    clickPosition?: {
+        x: number;
+        y: number;
+    };
+    isPopoverOpen?: boolean;
+    xCalloutValue?: string;
+    legend?: string | number | Date;
+    yCalloutValue?: string;
+    YValue?: string | number | Date;
+    XValue?: string;
+    color?: string;
+    culture?: string;
+    customCallout?: {
+        customizedCallout?: JSX.Element;
+        customCalloutProps?: ChartPopoverProps;
+    };
+    isCalloutForStack?: boolean;
+    xAxisCalloutAccessibilityData?: {
+        ariaLabel?: string;
+        data?: string;
+    };
+    hoverXValue?: string | number;
+    YValueHover?: YValueHover[];
+    descriptionMessage?: string;
+    ratio?: [number, number];
+    isCartesian?: boolean;
+}
+
+/**
+ * {@docCategory ChartProps}
+ */
+export declare interface ChartProps {
+    /**
+     * chart title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * Accessibility data for chart title
+     */
+    chartTitleAccessibilityData?: AccessibilityProps;
+    /**
+     * data for the points in the chart
+     */
+    chartData?: ChartDataPoint[];
+    /**
+     * Accessibility data for chart data
+     */
+    chartDataAccessibilityData?: AccessibilityProps;
+    /**
+     * data for the points in the line chart
+     */
+    lineChartData?: LineChartPoints[];
+    /**
+     * data for the points in the line chart
+     */
+    pointOptions?: SVGProps<SVGCircleElement>;
+    /**
+     * data for the dotted line on hovering the point
+     */
+    pointLineOptions?: SVGProps<SVGLineElement>;
+}
+
+declare enum ChartTypes {
+    AreaChart = 0,
+    LineChart = 1,
+    VerticalBarChart = 2,
+    VerticalStackedBarChart = 3,
+    GroupedVerticalBarChart = 4,
+    HeatMapChart = 5,
+    HorizontalBarChartWithAxis = 6
+}
+
+export declare interface ChildProps {
+    xScale?: any;
+    yScale?: any;
+    yScaleSecondary?: any;
+    containerHeight?: number;
+    containerWidth?: number;
+    optimizeLargeData?: boolean;
+}
+
+/**
+ * {@docCategory LineChart}
+ */
+export declare interface ColorFillBarData {
+    startX: number | Date;
+    endX: number | Date;
+}
+
+/**
+ * {@docCategory LineChart}
+ */
+export declare interface ColorFillBarsProps {
+    legend: string;
+    color: string;
+    data: ColorFillBarData[];
+    applyPattern?: boolean;
+    onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;
+}
+
+/**
+ * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,
+ * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.
+ * {@docCategory ChartData}
+ */
+export declare interface CustomizedCalloutData {
+    x: number | string | Date;
+    values: CustomizedCalloutDataPoint[];
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface CustomizedCalloutDataPoint {
+    legend: string;
+    y: number;
+    color: string;
+    xAxisCalloutData?: string;
+    yAxisCalloutData?: string | {
+        [id: string]: number;
+    };
+}
+
+declare enum CustomPoints {
+    dottedLine = 0
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface DataPoint {
+    /**
+     * Independent value of the data point, rendered along the x-axis.
+     * If x is a number, then each y-coordinate is plotted at its x-coordinate.
+     * If x is a string, then the data is evenly spaced along the x-axis.
+     */
+    x: number | string;
+    /**
+     * Dependent value of the data point, rendered along the y-axis.
+     */
+    y: number;
+    /**
+     * onClick action for each datapoint in the chart
+     */
+    onClick?: VoidFunction;
+}
+
+export declare const DataVizPalette: {
+    color1: string;
+    color2: string;
+    color3: string;
+    color4: string;
+    color5: string;
+    color6: string;
+    color7: string;
+    color8: string;
+    color9: string;
+    color10: string;
+    color11: string;
+    color12: string;
+    color13: string;
+    color14: string;
+    color15: string;
+    color16: string;
+    color17: string;
+    color18: string;
+    color19: string;
+    color20: string;
+    color21: string;
+    color22: string;
+    color23: string;
+    color24: string;
+    color25: string;
+    color26: string;
+    color27: string;
+    color28: string;
+    color29: string;
+    color30: string;
+    color31: string;
+    color32: string;
+    color33: string;
+    color34: string;
+    color35: string;
+    color36: string;
+    color37: string;
+    color38: string;
+    color39: string;
+    color40: string;
+    info: string;
+    disabled: string;
+    highError: string;
+    error: string;
+    warning: string;
+    success: string;
+    highSuccess: string;
+};
+
+/**
+ * DeclarativeChart component.
+ * {@docCategory DeclarativeChart}
+ */
+export declare const DeclarativeChart: React_2.FunctionComponent<DeclarativeChartProps>;
+
+/**
+ * DeclarativeChart props.
+ * {@docCategory DeclarativeChart}
+ */
+export declare interface DeclarativeChartProps extends React_2.RefAttributes<HTMLDivElement> {
+    /**
+     * The schema representing the chart data, layout and configuration
+     */
+    chartSchema: Schema;
+    /**
+     * Callback when an event occurs
+     */
+    onSchemaChange?: (eventData: Schema) => void;
+    /**
+     * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<IDeclarativeChart>;
+}
+
+/**
+ * Donutchart component.
+ * {@docCategory DonutChart}
+ */
+export declare const DonutChart: React_2.FunctionComponent<DonutChartProps>;
+
+/**
+ * Donut Chart properties.
+ * {@docCategory DonutChart}
+ */
+export declare interface DonutChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: ChartProps;
+    /**
+     * inner radius for donut size
+     */
+    innerRadius?: number;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: DonutChartStyles;
+    /**
+     * props for inside donut value
+     */
+    valueInsideDonut?: string | number;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSX.Element | undefined;
+    /**
+     * Define a custom callout props override
+     */
+    calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: ChartPopoverProps;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * Prop to show the arc labels in percentage format
+     * @default false
+     */
+    showLabelsInPercent?: boolean;
+    /**
+     * Prop to hide the arc labels
+     * @default true
+     */
+    hideLabels?: boolean;
+    /**
+     * Below height used for resizing of the chart
+     * Wrap chart in your container and send the updated height and width to these props.
+     * These values decide wheather chart re render or not. Please check examples for reference
+     */
+    height?: number;
+    /**
+     * Below width used for resizing of the chart
+     * Wrap chart in your container and send the updated height and width to these props.
+     * These values decide wheather chart re render or not. Please check examples for reference
+     */
+    width?: number;
+    /**
+     * this prop takes its parent as a HTML element to define the width and height of the chart
+     */
+    parentRef?: HTMLElement | null;
+    /**
+     * Additional CSS class(es) to apply to the Chart.
+     */
+    className?: string;
+    legendsOverflowText?: any;
+    legendProps?: Partial<LegendsProps>;
+    /** decides wether to show/hide legends
+     * @defaultvalue false
+     */
+    hideLegend?: boolean;
+    /**
+     * Url that the data-viz needs to redirect to upon clicking on it
+     */
+    href?: string;
+    /**
+     * Do not show tooltips in chart
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * Optional callback to access the Chart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: React_2.RefObject<Chart>;
+}
+
+/**
+ * Donut Chart style properties
+ * {@docCategory DonutChart}
+ */
+export declare interface DonutChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Donut Chart styles
+ * {@docCategory DonutChart}
+ */
+export declare interface DonutChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root?: string;
+    /**
+     * Style for the chart.
+     */
+    chart?: string;
+    /**
+     * Style for the legend container.
+     */
+    legendContainer: string;
+    /**
+     * Styles for the chart wrapper div
+     */
+    chartWrapper?: string;
+}
+
+declare interface EventAnnotation {
+    date: Date;
+    event: string;
+    onRenderCard?: () => React_2.ReactNode;
+}
+
+/**
+ * {@docCategory LineChart}
+ */
+export declare interface EventsAnnotationProps {
+    events: EventAnnotation[];
+    strokeColor?: string;
+    labelColor?: string;
+    labelHeight?: number;
+    labelWidth?: number;
+    mergedLabel: (count: number) => string;
+}
+
+export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
+
+export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface GroupedVerticalBarChartData {
+    /**
+     * Data for X axis label
+     */
+    name: string;
+    /**
+     * Data points for Grouped vertical bar chart
+     */
+    series: GVBarChartSeriesPoint[];
+    /**
+     * Accessibility data for Group Bars Stack Callout
+     */
+    stackCallOutAccessibilityData?: AccessibilityProps;
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface GVBarChartSeriesPoint {
+    /**
+     * Text for // need to check use of this
+     */
+    key: string;
+    /**
+     * Data for bar height of Grouped vertical bar chart
+     */
+    data: number;
+    /**
+     * Color for the legend in the chart
+     */
+    color: string;
+    /**
+     * Legend text in the chart
+     */
+    legend: string;
+    /**
+     * Callout data for x axis
+     * This is an optional prop, If haven;t given legend will take
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Callout data for y axis
+     * This is an optional prop, If haven't given data will take
+     */
+    yAxisCalloutData?: string;
+    /**
+     * onClick action for each datapoint in the chart
+     */
+    onClick?: VoidFunction;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+}
+
+export declare interface GVDataPoint {
+    /**
+     * This interface used for - While forming datapoints from given prop "data" in code
+     * datapoints are used for to draw graph
+     */
+    [key: string]: number | string;
+}
+
+export declare interface GVForBarChart {
+    /**
+     * While forming datapoints from given prop "data"
+     * These datapoints are used for to draw graph.
+     */
+    [key: string]: GVBarChartSeriesPoint;
+}
+
+export declare interface GVSingleDataPoint {
+    /**
+     * While forming datapoints from given prop "data" in code.
+     * These datapoints are used for to draw graph easily.
+     */
+    [key: string]: GVDataPoint;
+}
+
+/**
+ * HorizontalBarChart is the context wrapper and container for all HorizontalBarChart content/controls,
+ * It has no direct style or slot opinions.
+ *
+ * HorizontalBarChart also provides API interfaces for callbacks that will occur on navigation events.
+ */
+export declare const HorizontalBarChart: React_2.FunctionComponent<HorizontalBarChartProps>;
+
+/**
+ * Horizontal Bar Chart properties
+ * {@docCategory HorizontalBarChart}
+ */
+export declare interface HorizontalBarChartProps extends React_2.RefAttributes<HTMLDivElement> {
+    /**
+     * An array of chart data points for the Horizontal bar chart
+     */
+    data?: ChartProps[];
+    /**
+     * Width of bar chart
+     */
+    width?: number;
+    /**
+     * Height of bar chart
+     * @default 15
+     */
+    barHeight?: number;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * This property tells whether to show ratio on top of stacked bar chart or not.
+     */
+    hideRatio?: boolean[];
+    /**
+     * Do not show tooltips in chart
+     *
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * This property tells how to show data text on top right of bar chart.
+     * If barChartCustomData props added, then this props will be overrided.
+     * @default 'default'
+     */
+    chartDataMode?: ChartDataMode;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: HorizontalBarChartStyles;
+    /**
+     * Define a custom callout renderer for a horizontal bar
+     */
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: ChartPopoverProps;
+    /**
+     * Custom text to the chart (right side of the chart)
+     * IChartProps will be available as props to the method prop.
+     * If this method not given, default values (IHorizontalDataPoint \{x,y\})
+     * will be used to display the data/text based on given chartModeData prop.
+     */
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * Prop to define the variant of HorizontalBarChart to render
+     * @default HorizontalBarChartVariant.PartToWhole
+     */
+    variant?: HorizontalBarChartVariant;
+    /**
+     * Prop to hide the bar labels
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * line color for callout
+     */
+    color?: string;
+    /**
+     * prop to check if benchmark data is provided
+     */
+    showTriangle?: boolean;
+    legendsOverflowText?: any;
+    legendProps?: Partial<LegendsProps>;
+    /**
+     * prop to render the custom callout
+     */
+    onRenderCalloutPerHorizontalBar?: (props: ChartDataPoint) => JSX.Element | undefined;
+    /**
+     * Define a custom callout props override
+     */
+    calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
+}
+
+/**
+ * Horizontal Bar Chart styles
+ * {@docCategory HorizontalBarChart}
+ */
+export declare interface HorizontalBarChartStyles {
+    /**
+     * Styling for the root container
+     */
+    root: string;
+    /**
+     * Styling for each item in the container
+     */
+    items: string;
+    /**
+     * Style for the chart.
+     */
+    chart: string;
+    /**
+     * Style for the chart Title.
+     */
+    chartTitle: string;
+    /**
+     * Style for the bars.
+     */
+    barWrapper: string;
+    /**
+     * Style for left side text of the chart title
+     */
+    chartTitleLeft: string;
+    /**
+     * Style for right side text of the chart title
+     */
+    chartTitleRight: string;
+    /**
+     * Style for the chart data text denominator.
+     */
+    chartDataTextDenominator: string;
+    /**
+     * Style for the benchmark container
+     */
+    benchmarkContainer: string;
+    /**
+     * Style for the benchmark triangle
+     */
+    triangle: string;
+    /**
+     * Style for the bar labels
+     */
+    barLabel: string;
+    /**
+     * Style for the div containing the chart
+     */
+    chartWrapper: string;
+    /**
+     * Style for the legend container.
+     */
+    legendContainer: string;
+}
+
+/**
+ * {@docCategory HorizontalBarChart}
+ */
+export declare enum HorizontalBarChartVariant {
+    PartToWhole = "part-to-whole",
+    AbsoluteScale = "absolute-scale"
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface HorizontalBarChartWithAxisDataPoint {
+    /**
+     * Dependent value of the data point, rendered along the x-axis.
+     */
+    x: number;
+    /**
+     * Independent value of the data point, rendered along the y-axis.
+     * If y is a number, then each y-coordinate is plotted at its y-coordinate.
+     * If y is a string, then the data is evenly spaced along the y-axis.
+     */
+    y: number | string;
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend?: string;
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * Callout data for x axis
+     * This is an optional prop, If haven;t given legend will take
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Callout data for y axis
+     * This is an optional prop, If haven't given data will take
+     */
+    yAxisCalloutData?: string;
+    /**
+     * onClick action for each datapoint in the chart
+     */
+    onClick?: VoidFunction;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface HorizontalDataPoint {
+    /**
+     * Independent value of the data point, rendered along the x-axis.
+     * If x is a number, then each y-coordinate is plotted at its x-coordinate.
+     * If x is a string, then the data is evenly spaced along the x-axis.
+     */
+    x: number;
+    /**
+     * Total value of a single point bar chart.
+     */
+    total?: number;
+}
+
+/**
+ * {@docCategory DeclarativeChart}
+ */
+export declare interface IDeclarativeChart {
+    exportAsImage: (opts?: ImageExportOptions) => Promise<string>;
+}
+
+/**
+ * {@docCategory DeclarativeChart}
+ */
+export declare interface ImageExportOptions {
+    width?: number;
+    height?: number;
+    scale?: number;
+    background?: string;
+}
+
+/**
+ * @public
+ * ILegend interface
+ * {@docCategory Legends}
+ */
+export declare interface Legend {
+    /**
+     * Defines the title of the legend
+     */
+    title: string;
+    /**
+     * Defines the function that is executed on clicking this legend
+     */
+    action?: VoidFunction;
+    /**
+     * Defines the function that is executed upon hovering over the legend
+     */
+    hoverAction?: VoidFunction;
+    /**
+     * Defines the function that is executed upon moving the mouse away from the legend
+     */
+    onMouseOutAction?: (isLegendFocused?: boolean) => void;
+    /**
+     * The color for the legend
+     */
+    color: string;
+    /**
+     * The opacity of the legend color
+     */
+    opacity?: number;
+    /**
+     * The shape for the legend
+     */
+    shape?: LegendShape;
+    /**
+     * Indicated whether or not to apply stripe pattern
+     */
+    stripePattern?: boolean;
+    /**
+     * Indicates if the legend belongs to a line in the Bar Chart
+     */
+    isLineLegendInBarChart?: boolean;
+    nativeButtonProps?: React_2.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+export declare interface LegendDataItem {
+    /**
+     * Text to be displayed for legend item.
+     */
+    legendText: string | number;
+    /**
+     * Color for the specific legend
+     */
+    legendColor: string;
+}
+
+declare interface LegendMap {
+    [key: string]: boolean;
+}
+
+export declare const Legends: React_2.FunctionComponent<LegendsProps>;
+
+/**
+ * @public
+ * The shape for the legend
+ * default: show the rect legend
+ * triangle: show the triangle legend
+ * {@docCategory Legends}
+ */
+export declare type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;
+
+/**
+ * @public
+ * Legend properties
+ * {@docCategory Legends}
+ */
+export declare interface LegendsProps {
+    /**
+     * Prop that takes list of legends
+     */
+    legends: Legend[];
+    /**
+     * Additional CSS class(es) to apply to the legneds component.
+     */
+    className?: string;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: LegendsStyles;
+    /**
+     * This prop makes the legends component align itself to the center in the container it is sitting in
+     */
+    centerLegends?: boolean;
+    /**
+     * Enable the legends to wrap lines if there is not enough space to show all legends on a single line
+     */
+    enabledWrapLines?: boolean;
+    /**
+     * style for the overflow component
+     */
+    overflowStyles?: React_2.CSSProperties;
+    /**
+     * text for overflow legends string
+     */
+    overflowText?: string;
+    /**
+     * prop that decides if legends are focusable
+     * @default true
+     */
+    allowFocusOnLegends?: boolean;
+    /**
+     * prop that decide if we can select multiple legends or single legend at a time
+     * @default false
+     */
+    canSelectMultipleLegends?: boolean;
+    /**
+     * Callback issued when the selected option changes.
+     */
+    onChange?: (selectedLegends: string[], event: React_2.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;
+    /**
+     * Keys (title) that will be initially used to set selected items.
+     * This prop is used for multiSelect scenarios.
+     * In other cases, defaultSelectedLegend should be used.
+     */
+    defaultSelectedLegends?: string[];
+    /**
+     * Key that will be initially used to set selected item.
+     * This prop is used for singleSelect scenarios.
+     */
+    defaultSelectedLegend?: string;
+    /**
+     * The shape for the legend.
+     */
+    shape?: LegendShape;
+}
+
+/**
+ * @public
+ * Legends styles
+ * {@docCategory Legends}
+ */
+export declare interface LegendsStyles {
+    /**
+     * Style set for the root of the legend component
+     */
+    root?: string;
+    /**
+     * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend
+     */
+    legend?: string;
+    /**
+     * Style set for the rectangle that represents a legend
+     */
+    rect?: string;
+    /**
+     * styles set for the shape that represents a legend
+     */
+    shape?: string;
+    /**
+     * Style set for the triangle that represents a legend
+     */
+    triangle?: string;
+    /**
+     * Style for the legend text
+     */
+    text?: string;
+    /**
+     * Style for the legend text
+     */
+    hoverChange?: string;
+    /**
+     * Style for the area that is resizable
+     */
+    resizableArea?: string;
+}
+
+export declare interface LegendState {
+    activeLegend: string;
+    /** Set of legends selected, both for multiple selection and single selection */
+    selectedLegends: LegendMap;
+}
+
+/**
+ * @public
+ * Legend style properties
+ * {@docCategory Legends}
+ */
+export declare interface LegendStyleProps {
+    className?: string;
+    colorOnSelectedState?: string;
+    borderColor?: string;
+    opacity?: number;
+    overflow?: boolean;
+    stripePattern?: boolean;
+    isLineLegendInBarChart?: boolean;
+}
+
+/**
+ * Linechart component
+ * {@docCategory LineChart}
+ */
+export declare const LineChart: React_2.FunctionComponent<LineChartProps>;
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface LineChartDataPoint {
+    /**
+     * Independent value of the data point, rendered along the x-axis.
+     * If x is a number, then each y-coordinate is plotted at its x-coordinate.
+     * If data type on x is Date, then the data is spaced evenly by d3-scale
+     */
+    x: number | Date;
+    /**
+     * Dependent value of the data point, rendered along the y-axis.
+     */
+    y: number;
+    /**
+     * Defines the function that is executed on clicking  line
+     */
+    onDataPointClick?: () => void;
+    /**
+     * Callout data for x axis
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Callout data for y axis
+     */
+    yAxisCalloutData?: string | {
+        [id: string]: number;
+    };
+    /**
+     * Whether to hide callout data for the point.
+     */
+    hideCallout?: boolean;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+    /**
+     * X axis Accessibility data for callout
+     */
+    xAxisCalloutAccessibilityData?: AccessibilityProps;
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface LineChartGap {
+    /**
+     * Starting index of the gap.
+     */
+    startIndex: number;
+    /**
+     * Ending index of the gap.
+     */
+    endIndex: number;
+}
+
+/**
+ * {@docCategory ChartProps}
+ */
+export declare interface LineChartLineOptions extends SVGProps<SVGPathElement> {
+    /**
+     * Width of the line/stroke.
+     * Overrides the strokeWidth set on ICartesianChartProps level.
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
+     */
+    strokeWidth?: number | string;
+    /**
+     * Pattern of dashes and gaps.
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
+     */
+    strokeDasharray?: string | number;
+    /**
+     * Offset on rendering of stroke dash array.
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset
+     */
+    strokeDashoffset?: string | number;
+    /**
+     * Shape at the end of a subpath.
+     * Default round.
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap
+     */
+    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+    /**
+     * Width of border around the line. Default no border.
+     */
+    lineBorderWidth?: string | number;
+    /**
+     * Color of border around the line. Default white.
+     */
+    lineBorderColor?: string;
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface LineChartPoints {
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend: string;
+    /**
+     * The shape for the legend
+     * default: show the rect legend
+     */
+    legendShape?: LegendShape;
+    /**
+     * dataPoints for the line chart
+     */
+    data: LineChartDataPoint[];
+    /**
+     * gaps in the line chart where a line is not drawn
+     */
+    gaps?: LineChartGap[];
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * opacity for chart fill color
+     */
+    opacity?: number;
+    /**
+     * options for the line drawn
+     */
+    lineOptions?: LineChartLineOptions;
+    /**
+     * hide dots for points that are not active
+     */
+    hideNonActiveDots?: boolean;
+    /**
+     * Defines the function that is executed on clicking this legend
+     */
+    onLegendClick?: (selectedLegend: string | null | string[]) => void;
+    /**
+     * Defines the function that is executed on clicking  line
+     */
+    onLineClick?: () => void;
+}
+
+/**
+ * Line Chart properties
+ * {@docCategory LineChart}
+ */
+export declare interface LineChartProps extends CartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data: ChartProps;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: LineChartStyles;
+    /**
+     * Show event annotation
+     */
+    eventAnnotationProps?: EventsAnnotationProps;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
+    /**
+     * Define a custom callout renderer for a stack; default is to render per data point
+     */
+    onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;
+    /**
+     * Callback for getting callout description message
+     */
+    getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;
+    colorFillBars?: ColorFillBarsProps[];
+    /**
+     * if this is set to true, then for each line there will be a unique shape assigned to the point,
+     * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,
+     *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more
+     * than 8 lines in the line chart then it will again start from cicle to octagon.
+     * setting this flag to true will also change the behavior of the points, like for a
+     * line, last point shape and first point shape will be visible all the times, and all
+     * other points will get enlarge only when hovered over them
+     * if set to false default shape will be circle, with the existing behavior
+     * @default false
+     */
+    allowMultipleShapesForPoints?: boolean;
+    optimizeLargeData?: boolean;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * @default false
+     * The prop used to enable the perf optimization
+     */
+    enablePerfOptimization?: boolean;
+}
+
+/**
+ * Line Chart style properties
+ * {@docCategory LineChart}
+ */
+export declare interface LineChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Line Chart styles
+ * {@docCategory LineChart}
+ */
+export declare interface LineChartStyles extends CartesianChartStyles {
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface LineDataInVerticalBarChart {
+    y: VerticalBarChartDataPoint['y'];
+    yAxisCalloutData?: string | undefined;
+    /**
+     * onClick action for each datapoint in the chart
+     */
+    onClick?: VoidFunction;
+    /**
+     * Whether to use the secondary y scale or not
+     * False by default.
+     */
+    useSecondaryYScale?: boolean;
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface LineDataInVerticalStackedBarChart {
+    y: number;
+    color: string;
+    legend: string;
+    /**
+     * Data to show in callout
+     */
+    data?: number;
+    yAxisCalloutData?: string;
+    /**
+     * Whether to use the secondary y scale or not
+     * False by default.
+     */
+    useSecondaryYScale?: boolean;
+}
+
+/**
+ * {@docCategory ChartProps}
+ */
+export declare interface Margins {
+    /**
+     * left margin for the chart.
+     */
+    left?: number;
+    /**
+     * Right margin for the chart.
+     */
+    right?: number;
+    /**
+     * Top margin for the chart.
+     */
+    top?: number;
+    /**
+     * Bottom margin for the chart.
+     */
+    bottom?: number;
+}
+
+export declare interface ModifiedCartesianChartProps extends CartesianChartProps {
+    /**
+     * Define the chart title
+     */
+    chartTitle?: string;
+    /**
+     * Only used for Area chart
+     * Value used to draw y axis of that chart.
+     */
+    maxOfYVal?: number;
+    /**
+     * Data of the chart
+     */
+    points: any;
+    /**
+     * Define type of the chart
+     */
+    chartType: ChartTypes;
+    /** X axis type */
+    xAxisType: XAxisTypes;
+    /** Y axis type */
+    yAxisType?: YAxisType;
+    /**
+     * Legends of the chart.
+     */
+    legendBars: JSX.Element | null;
+    /**
+     * Callout props
+     */
+    calloutProps?: ChartPopoverProps;
+    /**
+     * Callback method used for to get margins to the chart.
+     */
+    getmargins?: (margins: Margins) => void;
+    /**
+     * This is a call back method to the chart from cartesian chart.
+     * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.
+     * It also contians an optional param xAxisElement - defines as x axis scale element.
+     * This param used to enable feature word wrap of Xaxis.
+     */
+    getGraphData?: any;
+    /**
+     * Used for bar chart graphs.
+     * To define width of the bar
+     */
+    barwidth?: number;
+    /**
+     * Used for tick styles of the x axis of the chart
+     * Tick params are applicable for date axis only.
+     */
+    tickParams?: {
+        tickValues?: number[] | Date[] | string[];
+        tickFormat?: string;
+    };
+    /**
+     * it's padding between bar's or lines in the graph
+     */
+    xAxisPadding?: number;
+    /**
+     * it's padding between bar's or lines in the graph
+     */
+    yAxisPadding?: number;
+    /**
+     * Children elements specific to derived chart types.
+     */
+    children(props: ChildProps): React_2.ReactNode;
+    /** dataset values to find out domain of the String axis
+     * Present using for only vertical stacked bar chart and grouped vertical bar chart
+     */
+    datasetForXAxisDomain?: string[];
+    /**
+     * if the data points for the y-axis is of type string, then we need to give this
+     * prop to construct the y-axis
+     */
+    stringDatasetForYAxisDomain?: string[];
+    /**
+     * The prop used to define the culture to localize the numbers and date
+     */
+    culture?: string;
+    getAxisData?: any;
+    /**
+     * Callback method used when mouse leaves the chart boundary.
+     */
+    onChartMouseLeave?: () => void;
+    /** Callback method to get extra margins for domain */
+    getDomainMargins?: (containerWidth: number) => Margins;
+    /** Padding between each bar/line-point */
+    xAxisInnerPadding?: number;
+    /** Padding before first bar/line-point and after last bar/line-point */
+    xAxisOuterPadding?: number;
+    /**
+     *@default false
+     *Used for to elipse y axis labes and show tooltip on x axis labels
+     */
+    showYAxisLablesTooltip?: boolean;
+    /**
+     *@default false
+     *Used for showing complete y axis lables   */
+    showYAxisLables?: boolean;
+    /**
+     * @default false
+     * Used to control the first render cycle Performance optimization code.
+     */
+    enableFirstRenderOptimization?: boolean;
+}
+
+/**
+ * we need to make sure that if we add any property to this, then
+ * we need to also add that in  pointTypes below and vise-versa
+ */
+declare enum Points {
+    circle = 0,
+    square = 1,
+    triangle = 2,
+    diamond = 3,
+    pyramid = 4,
+    hexagon = 5,
+    pentagon = 6,
+    octagon = 7
+}
+
+export declare interface PopoverComponentStyles {
+    calloutContentRoot: string;
+    calloutDateTimeContainer: string;
+    calloutContentX: string;
+    calloutBlockContainer: string;
+    calloutBlockContainertoDrawShapefalse: string;
+    calloutBlockContainertoDrawShapetrue: string;
+    shapeStyles: string;
+    calloutlegendText: string;
+    calloutContentY: string;
+    descriptionMessage: string;
+    ratio: string;
+    numerator: string;
+    denominator: string;
+    calloutInfoContainer: string;
+    calloutContainer: string;
+}
+
+export declare interface RefArrayData {
+    index?: string;
+    refElement?: SVGGElement;
+}
+
+/**
+ * Render function interface for providing overrideable render callbacks.
+ *
+ * @public
+ */
+declare interface RenderFunction<P> {
+    (props?: P, defaultRender?: (props?: P) => JSX.Element | null): JSX.Element | null;
+}
+
+export declare const ResponsiveContainer: React_2.FC<ResponsiveContainerProps>;
+
+declare interface ResponsiveContainerProps {
+    children: React_2.ReactElement;
+    onResize?: (width: number, height: number) => void;
+    width?: number | string;
+    height?: number | string;
+}
+
+/**
+ * DeclarativeChart schema.
+ * {@docCategory DeclarativeChart}
+ */
+export declare interface Schema {
+    /**
+     * Plotly schema represented as JSON object
+     */
+    plotlySchema: any;
+}
+
+export declare const Shape: React_2.FunctionComponent<ShapeProps>;
+
+export declare interface ShapeProps {
+    svgProps: React_2.SVGAttributes<SVGElement>;
+    pathProps: React_2.SVGAttributes<SVGPathElement>;
+    shape: LegendShape;
+    classNameForNonSvg?: string;
+    style?: React_2.CSSProperties | undefined;
+}
+
+/**
+ * Sparkline is the context wrapper and container for all Sparkline content/controls,
+ * It has no direct style or slot opinions.
+ *
+ * Sparkline also provides API interfaces for callbacks that will occur on navigation events.
+ */
+export declare const Sparkline: React_2.FunctionComponent<SparklineProps>;
+
+/**
+ * Sparkline properties
+ * {@docCategory SparklineChart}
+ */
+export declare interface SparklineProps extends React.RefAttributes<HTMLDivElement> {
+    /**
+     * An array of chart data points for the Sparkline chart
+     */
+    data?: ChartProps;
+    /**
+     * Width of chart
+     * * @default 80
+     */
+    width?: number;
+    /**
+     * Height of chart
+     * @default 20
+     */
+    height?: number;
+    /**
+     * Width of value text
+     * * @default 80
+     */
+    valueTextWidth?: number;
+    /**
+     * Additional CSS class(es) to apply to the SparklineChart.
+     */
+    className?: string;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * Prop used to determine whether to show the legend or not
+     */
+    showLegend?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: SparklineStyles;
+}
+
+export declare interface SparklineStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Sparkline styles
+ * {@docCategory SparklineChart}
+ */
+export declare interface SparklineStyles {
+    inlineBlock?: string;
+    valueText?: string;
+}
+
+export declare const Textbox: React_2.FunctionComponent<TextboxProps>;
+
+declare interface TextboxProps {
+    text: string;
+    width: number;
+    x: number;
+    y: number;
+    lineHeight: number;
+    textAnchor?: 'start' | 'middle' | 'end';
+    fontSize?: string;
+    fill?: string;
+}
+
+/**
+ * VerticalBarchart component
+ * {@docCategory VerticalBarChart}
+ */
+export declare const VerticalBarChart: React_2.FunctionComponent<VerticalBarChartProps>;
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface VerticalBarChartDataPoint {
+    /**
+     * Independent value of the data point, rendered along the x-axis.
+     * If x is a number, then each y-coordinate is plotted at its x-coordinate.
+     * If x is a string, then the data is evenly spaced along the x-axis.
+     */
+    x: number | string | Date;
+    /**
+     * Dependent value of the data point, rendered along the y-axis.
+     */
+    y: number;
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend?: string;
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * Callout data for x axis
+     * This is an optional prop, If haven;t given legend will take
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Callout data for y axis
+     * This is an optional prop, If haven't given data will take
+     */
+    yAxisCalloutData?: string;
+    /**
+     * data to render the line along with bars
+     */
+    lineData?: LineDataInVerticalBarChart;
+    /**
+     * onClick action for each datapoint in the chart
+     */
+    onClick?: VoidFunction;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+}
+
+/**
+ * Vertical Bar Chart properties
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface VerticalBarChartProps extends CartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: VerticalBarChartDataPoint[];
+    /**
+     * Define a custom callout renderer for a data point.
+     */
+    onRenderCalloutPerDataPoint?: RenderFunction<VerticalBarChartDataPoint>;
+    /**
+     * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px,
+     * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values.
+     * @default 16
+     */
+    barWidth?: number | 'default' | 'auto';
+    /**
+     * Colors from which to select the color of each bar.
+     */
+    colors?: string[];
+    /**
+     * chart title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * Legend text for the line datapoint in the chart
+     */
+    lineLegendText?: string;
+    /**
+     * color for the legend  of the line in the chart
+     * @default theme.yellow
+     */
+    lineLegendColor?: string;
+    /**
+     * This prop makes sure that all the bars are of same color.
+     * it will take the first color from the array of colors in
+     * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight
+     * @default false
+     */
+    useSingleColor?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: VerticalBarChartStyles;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * it's padding between bar's or lines in the graph
+     */
+    xAxisPadding?: number;
+    /**
+     * options for the line drawn
+     */
+    lineOptions?: LineChartLineOptions;
+    /**
+     * Prop to hide the bar labels
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * Maximum width of a bar, in pixels.
+     * @default 24
+     */
+    maxBarWidth?: number;
+    /**
+     * Padding between bars as a fraction of the [step](https://d3js.org/d3-scale/band#band_step).
+     * Takes a number in the range [0, 1]. Only applicable to string x-axis.
+     * @default 2/3
+     */
+    xAxisInnerPadding?: number;
+    /**
+     * Padding before the first bar and after the last bar as a fraction of
+     * the [step](https://d3js.org/d3-scale/band#band_step). Takes a number in the range [0, 1].
+     * Only applicable to string x-axis.
+     */
+    xAxisOuterPadding?: number;
+}
+
+/**
+ * Vertical Bar Chart style properties
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface VerticalBarChartStyleProps extends CartesianChartStyleProps {
+    /**
+     * color of the datapoint legend
+     */
+    legendColor?: string;
+}
+
+/**
+ * Vertical Bar Chart styles
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface VerticalBarChartStyles extends CartesianChartStyles {
+    /**
+     * Style for the bar labels
+     */
+    barLabel: string;
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface VerticalStackedBarDataPoint extends Omit<DataPoint, 'x'> {
+    /**
+     * Independent value of the data point, rendered along the x-axis.
+     * If x is a number, then each y-coordinate is plotted at its x-coordinate.
+     * If x is a string, then the data is evenly spaced along the x-axis.
+     * If data type on x is Date, then the data is spaced evenly by d3-scale.
+     */
+    x: number | string | Date;
+}
+
+/**
+ * {@docCategory ChartProps}
+ */
+export declare interface VerticalStackedChartProps {
+    /**
+     * data for the points in the chart
+     */
+    chartData: VSChartDataPoint[];
+    /**
+     * Data for x axis label for multistacked Vertical bar chart
+     */
+    xAxisPoint: number | string | Date;
+    /**
+     * Callout data for x axis
+     * This is an optional prop, If haven't given, legend will take
+     */
+    xAxisCalloutData?: string;
+    /**
+     * line data to render lines on stacked bar chart
+     */
+    lineData?: LineDataInVerticalStackedBarChart[];
+    /**
+     * Accessibility data for Whole stack callout
+     */
+    stackCallOutAccessibilityData?: AccessibilityProps;
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface VSChartDataPoint {
+    /**
+     * data the datapoint in the chart
+     */
+    data: number;
+    /**
+     * Legend text for the datapoint in the chart
+     */
+    legend: string;
+    /**
+     * color for the legend in the chart
+     */
+    color?: string;
+    /**
+     * Callout data for x axis
+     * This is an optional prop, If haven;t given legend will take
+     */
+    xAxisCalloutData?: string;
+    /**
+     * Callout data for y axis
+     * This is an optional prop, If haven't given data will take
+     */
+    yAxisCalloutData?: string;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+}
+
+declare enum XAxisTypes {
+    NumericAxis = 0,
+    DateAxis = 1,
+    StringAxis = 2
+}
+
+declare enum YAxisType {
+    NumericAxis = 0,
+    DateAxis = 1,
+    StringAxis = 2
+}
+
+export declare interface YValueHover {
+    legend?: string;
+    y?: number;
+    color?: string;
+    data?: string | number;
+    shouldDrawBorderBottom?: boolean;
+    yAxisCalloutData?: string | {
+        [id: string]: number;
+    };
+    index?: number;
+    callOutAccessibilityData?: AccessibilityProps;
+}
+
+export { }