@fluentui/react-charts 0.0.0-nightly-20250423-0405.1 → 0.0.0-nightly-20250423-1415.1

package/dist/index.d.ts

@@ -0,0 +1,3337 @@
+/// <reference types="react" />
+
+import { CurveFactory } from 'd3-shape';
+import * as React_2 from 'react';
+import { RefObject } from 'react';
+import { SankeyGraph } from 'd3-sankey';
+import { SankeyLayout } from 'd3-sankey';
+import { SankeyLink } from 'd3-sankey';
+import { SankeyNode } from 'd3-sankey';
+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;
+}
+
+/**
+ * This is used to introduce dynamic padding for cases where the number of nodes in a column is huge
+ * so that we maintain a node to space ratio for such columns as if we fail to do so the
+ * chart is devoid of nodes and only shows links.
+ */
+export declare function adjustPadding(sankey: SankeyLayoutGenerator, height: number, nodesInColumn: NodesInColumns): void;
+
+export declare const ARC_PADDING = 2;
+
+export declare const AreaChart: React_2.FunctionComponent<AreaChartProps>;
+
+export declare interface AreaChartAreaPoint {
+    xVal: string | number;
+    values: AreaChartDataSetPoint;
+}
+
+export declare interface AreaChartDataSetPoint {
+    [key: string]: number | string | number[];
+}
+
+/**
+ * Area Chart properties.
+ * {@docCategory AreaChart}
+ */
+export declare interface AreaChartProps 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?: CartesianChartStyles;
+    /**
+     * 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>;
+    /**
+     * 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;
+    optimizeLargeData?: boolean;
+    /**
+     * @default false
+     * The prop used to enable gradient fill color for the chart.
+     */
+    enableGradient?: boolean;
+    /**
+     * @default tonexty
+     * The prop used to define the Y axis mode (tonexty or tozeroy)
+     */
+    mode?: 'tozeroy' | 'tonexty';
+}
+
+/**
+ * Area Chart style properties
+ * {@docCategory AreaChart}
+ */
+export declare interface AreaChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Area Chart styles
+ * {@docCategory AreaChart}
+ */
+export declare interface AreaChartStyles extends CartesianChartStyles {
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+declare interface BaseDataPoint {
+    /**
+     * 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;
+}
+
+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;
+}
+
+export declare const BREAKPOINTS: {
+    minRadius: number;
+    arcWidth: number;
+    fontSize: number;
+}[];
+
+export declare const calcNeedleRotation: (chartValue: number, minValue: number, maxValue: number) => 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;
+    /**
+     * @default false
+     * The prop used to decide rounded ticks on y axis
+     */
+    roundedTicks?: 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
+     */
+    SankeyChartData?: SankeyChartData;
+    /**
+     * 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,
+    ScatterChart = 7
+}
+
+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;
+}
+
+export declare interface DPointType {
+    values: {
+        0: number;
+        1: number;
+        data: {};
+    };
+    xVal: number | Date;
+}
+
+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 interface ExtendedSegment extends GaugeChartSegment {
+    start: number;
+    end: number;
+}
+
+export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
+
+/**
+ * Gauge Chart properties
+ * {@docCategory GaugeChart}
+ */
+export declare interface GaugeChartProps {
+    /**
+     * Width of the chart
+     */
+    width?: number;
+    /**
+     * Height of the chart
+     */
+    height?: number;
+    /**
+     * Title of the chart
+     */
+    chartTitle?: string;
+    /**
+     * Current value of the gauge
+     */
+    chartValue: number;
+    /**
+     * Sections of the gauge
+     */
+    segments: GaugeChartSegment[];
+    /**
+     * Minimum value of the gauge
+     * @defaultvalue 0
+     */
+    minValue?: number;
+    /**
+     * Maximum value of the gauge
+     */
+    maxValue?: number;
+    /**
+     * Additional text to display below the chart value
+     */
+    sublabel?: string;
+    /**
+     * Hide the min and max values of the gauge
+     * @defaultvalue false
+     */
+    hideMinMax?: boolean;
+    /**
+     * Format of the chart value
+     * @defaultvalue GaugeValueFormat.Percentage
+     */
+    chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string);
+    /**
+     * Decides whether to show/hide legends
+     * @defaultvalue false
+     */
+    hideLegend?: boolean;
+    legendProps?: Partial<LegendsProps>;
+    /**
+     * Do not show tooltips in chart
+     * @defaultvalue false
+     */
+    hideTooltip?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: GaugeChartStyles;
+    /**
+     * Defines the culture to localize the numbers and dates
+     */
+    culture?: string;
+    /**
+     * Props for the callout in the chart
+     */
+    calloutProps?: Partial<ChartPopoverProps>;
+    /**
+     * Specifies the variant of GaugeChart to be rendered
+     * @defaultvalue GaugeChartVariant.MultipleSegments
+     */
+    variant?: GaugeChartVariant;
+    /**
+     * Prop to enable the gradient in the chart
+     * @default false
+     */
+    enableGradient?: boolean;
+    /**
+     * Prop to enable the round corners in the chart
+     * @default false
+     */
+    roundCorners?: 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.RefObject<Chart>;
+}
+
+/**
+ * Gauge Chart segment interface.
+ * {@docCategory GaugeChart}
+ */
+export declare interface GaugeChartSegment {
+    /**
+     * Legend text for a segment
+     */
+    legend: string;
+    /**
+     * Size of the segment
+     */
+    size: number;
+    /**
+     * Color of the segment
+     */
+    color?: string;
+    /**
+     * Gradient color of the segment
+     */
+    gradient?: [string, string];
+    /**
+     * Accessibility data for the segment
+     */
+    accessibilityData?: AccessibilityProps;
+}
+
+/**
+ * Gauge Chart styles
+ * {@docCategory GaugeChart}
+ */
+export declare interface GaugeChartStyles {
+    /**
+     * Styles for the root element
+     */
+    root?: string;
+    /**
+     * Styles for the chart
+     */
+    chart?: string;
+    /**
+     * Styles for the min and max values
+     */
+    limits?: string;
+    /**
+     * Styles for the chart value
+     */
+    chartValue?: string;
+    /**
+     * Styles for the sublabel
+     */
+    sublabel?: string;
+    /**
+     * Styles for the needle
+     */
+    needle?: string;
+    /**
+     * Styles for the chart title
+     */
+    chartTitle?: string;
+    /**
+     * Styles for the segments
+     */
+    segment?: string;
+    /**
+     * Styles for gradient segments
+     */
+    gradientSegment?: string;
+    /**
+     * Styles for the legends container
+     */
+    legendsContainer?: 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 legend text
+     */
+    calloutlegendText?: string;
+    /**
+     * Styles for the shape object in the callout
+     */
+    shapeStyles?: string;
+}
+
+/**
+ * {@docCategory GaugeChart}
+ */
+export declare type GaugeChartVariant = 'single-segment' | 'multiple-segments';
+
+/**
+ * {@docCategory GaugeChart}
+ */
+export declare type GaugeValueFormat = 'percentage' | 'fraction';
+
+export declare const getChartValueLabel: (chartValue: number, minValue: number, maxValue: number, chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string) | undefined, forCallout?: boolean) => string;
+
+export declare const getColorContrast: (c1: string, c2: string) => number;
+
+export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
+
+export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
+
+export declare const getSegmentLabel: (segment: ExtendedSegment, minValue: number, maxValue: number, variant?: GaugeChartVariant, isAriaLabel?: boolean) => string;
+
+export declare const GroupedVerticalBarChart: React_2.FC<GroupedVerticalBarChartProps>;
+
+/**
+ * {@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;
+}
+
+/**
+ * Vertical Bar Chart properties
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface GroupedVerticalBarChartProps extends CartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: GroupedVerticalBarChartData[];
+    /**
+     * 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;
+    /**
+     * 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?: GroupedVerticalBarChartStyles;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * To display multi stack callout or single callout
+     * @default false
+     */
+    isCalloutForStack?: boolean;
+    /**
+     * 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;
+    /**
+     * Specifies the mode of the chart.
+     * @default 'default'
+     */
+    mode?: 'default' | 'plotly';
+}
+
+/**
+ * Vertical Bar Chart style properties
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface GroupedVerticalBarChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Vertical Bar Chart styles
+ * {@docCategory VerticalBarChart}
+ */
+export declare interface GroupedVerticalBarChartStyles extends CartesianChartStyles {
+    /**
+     * Style for the bar labels
+     */
+    barLabel: string;
+}
+
+/**
+ * This is used to group nodes by column index.
+ */
+export declare function groupNodesByColumn(graph: SankeyChartData): NodesInColumns;
+
+/**
+ * {@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;
+}
+
+export declare const HeatMapChart: React_2.FunctionComponent<HeatMapChartProps>;
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface HeatMapChartData {
+    /**
+     * name of the legend
+     */
+    legend: string;
+    data: HeatMapChartDataPoint[];
+    /**
+     * This  number will be used to get the color for the legend
+     */
+    value: number;
+}
+
+export declare interface HeatMapChartDataPoint {
+    x: string | Date | number;
+    y: string | Date | number;
+    value: number;
+    /**
+     * The value/ text to be rendered in the rectange
+     */
+    rectText?: string | number;
+    /**
+     * denomination to show in the callout
+     */
+    ratio?: [number, number];
+    /**
+     * description message to the callout
+     */
+    descriptionMessage?: string;
+    /**
+     * onClick action for each datapoint in the chart
+     */
+    onClick?: VoidFunction;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+}
+
+/**
+ * Heat Map Chart properties
+ * {@docCategory HeatMapChart}
+ */
+export declare interface HeatMapChartProps extends CartesianChartProps {
+    /**
+     * chart title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * data to provide for Heat Map
+     */
+    data: HeatMapChartData[];
+    /**
+     * The domain value for the color scale,
+     *
+     */
+    domainValuesForColorScale: number[];
+    /**
+     * The range values for the color scale,
+     * fill the array with colors in hex format
+     * note:- it should contain values exactly as many as values in the array
+     * `domainValuesForColorScale`
+     */
+    rangeValuesForColorScale: string[];
+    /**
+     * date formatter of x axis,
+     * if the x-axis data point are of date type then user can use this
+     * prop to format the date
+     * refer to https://github.com/d3/d3-time-format for string values
+     * @default '%b/%d'
+     */
+    xAxisDateFormatString?: string;
+    /**
+     * date formatter of y axis,
+     * if the y-axis data point are or date type then user can use this
+     * prop to format the date
+     * refer to https://github.com/d3/d3-time-format for string values
+     * @default '%b/%d'
+     */
+    yAxisDateFormatString?: string;
+    /**
+     * number formatter of x axis
+     * if the x-axis data pints are of number type then user can
+     * use this prop to format the number
+     * refer to https://github.com/d3/d3-format for string values
+     * @default '.2~s'
+     */
+    xAxisNumberFormatString?: string;
+    /**
+     * number formatter of y axis
+     * if the y-axis data pints are of number type then user can
+     * use this prop to format the number
+     * refer to https://github.com/d3/d3-format for string values
+     * @default '.2~s'
+     */
+    yAxisNumberFormatString?: string;
+    /**
+     * string formatter for x-axis.
+     * This prop only applies if the x-axis is of string type
+     *
+     * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending
+     * order and then render in the x-axis. this behaviour would force the order of the data points.
+     * to overcome , user can give x-axis point names as p1 p2...etc and map those p1 and p2 to custom name.
+     * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom
+     * name to that point by using this prop, hence giving the us the flexiblity of the order in which
+     * label should render
+     *
+     * see the example file for the usage of the prop
+     */
+    xAxisStringFormatter?: (point: string) => string;
+    /**
+     * string formatter for y-axis.
+     * This prop only applies if the y-axis is of string type
+     *
+     * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending
+     * order and then render in the y-axis. this behaviour would force the order of the data points.
+     * to overcome , user can give y-axis point names as p1 p2...etc and map those p1 and p2 to custom name.
+     * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom
+     * name to that point by using this prop, hence giving the us the flexiblity of the order in which
+     * label should render
+     *
+     * see the exaple file for the usage of the prop
+     */
+    yAxisStringFormatter?: (point: string) => string;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: HeatMapChartStyles;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     *@default false
+     *Used for showing complete y axis lables   */
+    showYAxisLables?: boolean;
+    /**
+     * @default alphabetical
+     * The prop used to decide order of string axis labels */
+    sortOrder?: 'none' | 'alphabetical';
+}
+
+/**
+ * Heat Map Chart styles
+ * {@docCategory HeatMapChart}
+ */
+export declare interface HeatMapChartStyles extends CartesianChartStyles {
+    root?: string;
+    text?: string;
+}
+
+/**
+ * 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"
+}
+
+export declare const HorizontalBarChartWithAxis: React_2.FunctionComponent<HorizontalBarChartWithAxisProps>;
+
+/**
+ * {@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;
+}
+
+/**
+ * Horizontal Bar Chart with Axis properties
+ * {@docCategory HorizontalBarChartWithAxis}
+ */
+export declare interface HorizontalBarChartWithAxisProps extends CartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: HorizontalBarChartWithAxisDataPoint[];
+    /**
+     * Define a custom callout renderer for a data point.
+     */
+    onRenderCalloutPerDataPoint?: RenderFunction<HorizontalBarChartWithAxisDataPoint>;
+    /**
+     * Width of each bar in the chart.
+     */
+    barHeight?: number;
+    /**
+     * Colors from which to select the color of each bar.
+     */
+    colors?: string[];
+    /**
+     * chart title for the chart
+     */
+    chartTitle?: 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?: HorizontalBarChartWithAxisStyles;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * it's padding between bar's or lines in the graph
+     */
+    yAxisPadding?: 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
+     * The prop used to enable gradient fill color for the chart.
+     */
+    enableGradient?: boolean;
+    /**
+     * @default false
+     * The prop used to enable rounded corners for the bars.
+     */
+    roundCorners?: boolean;
+}
+
+/**
+ * Horizontal Bar Chart with Axis style properties
+ * {@docCategory HorizontalBarChartWithAxis}
+ */
+export declare interface HorizontalBarChartWithAxisStyleProps extends CartesianChartStyleProps {
+    /**
+     * color of the datapoint legend
+     */
+    legendColor?: string;
+}
+
+/**
+ * Horizontal Bar Chart with Axis styles
+ * {@docCategory HorizontalBarChartWithAxis}
+ */
+export declare interface HorizontalBarChartWithAxisStyles extends CartesianChartStyles {
+    /**
+     * Style for the chart label.
+     *
+     */
+    chartLabel?: string;
+    /**
+     * Style for the line representing the domain of the x-axis.
+     *
+     */
+    xAxisDomain?: string;
+    /**
+     * Style for the lines representing the ticks along the x-axis.
+     *
+     */
+    xAxisTicks?: string;
+    /**
+     * Style for the text labeling each tick along the x-axis.
+     *
+     */
+    xAxisText?: string;
+    /**
+     * Style for the line representing the domain of the y-axis.
+     *
+     */
+    yAxisDomain?: string;
+    /**
+     * Style for the lines representing the ticks along the y-axis.
+     *
+     */
+    yAxisTicks?: string;
+    /**
+     * Style for the text labeling each tick along the y-axis.
+     *
+     */
+    yAxisText?: string;
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover: string;
+}
+
+/**
+ * {@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 multi-select scenarios when
+     * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.
+     *
+     * Updating this prop does not change the selection after the component has been initialized. For controlled
+     * selections, use selectedLegends instead.
+     *
+     * @see selectedLegends for setting the selected legends in controlled mode.
+     * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.
+     */
+    defaultSelectedLegends?: string[];
+    /**
+     * Key that will be initially used to set selected item. This prop is used for single-select scenarios when
+     * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.
+     *
+     * Updating this prop does not change the selection after the component has been initialized. For controlled
+     * selections, use selectedLegend instead.
+     *
+     * @see selectedLegend for setting the selected legend in controlled mode.
+     * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.
+     */
+    defaultSelectedLegend?: string;
+    /**
+     * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is
+     * true. For single-select, use selectedLegend.
+     *
+     * When this prop is provided, the component is controlled and does not automatically update the selection based on
+     * user interactions; the parent component must update the value passed to this property by handling the onChange
+     * event.
+     *
+     * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.
+     * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.
+     */
+    selectedLegends?: string[];
+    /**
+     * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is
+     * false or unspecified. For multi-select, use selectedLegends.
+     *
+     * When this prop is provided, the component is controlled and does not automatically update the selection based on
+     * user interactions; the parent component must update the value passed to this property by handling the onChange
+     * event.
+     *
+     * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.
+     * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.
+     */
+    selectedLegend?: 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 extends BaseDataPoint {
+    /**
+     * Independent value of the data point, rendered along the x-axis.
+     */
+    x: number | Date;
+    /**
+     * Dependent value of the data point, rendered along the y-axis.
+     */
+    y: number;
+}
+
+/**
+ * {@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;
+    /**
+     * Defines the type of interpolation used to render the line.
+     * @default 'linear'
+     */
+    curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;
+}
+
+/**
+ * {@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[] | ScatterChartDataPoint[];
+    /**
+     * 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;
+    /**
+     * options for the line drawn
+     */
+    lineOptions?: LineChartLineOptions;
+}
+
+export declare interface MapXToDataSet {
+    [key: string]: LineChartDataPoint[];
+    [key: number]: LineChartDataPoint[];
+}
+
+/**
+ * {@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;
+    /**
+     * To enable callout for individual bar or complete stack. Using for only Vertical stacked bar chart.
+     * @default false
+     * @type \{boolean \}
+     */
+    isCalloutForStack?: boolean;
+    /** 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[];
+    /** Own callout design */
+    customizedCallout?: any;
+    /**
+     * 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;
+}
+
+declare type NodesInColumns = {
+    [key: number]: SNode[];
+};
+
+/**
+ * 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 function preRenderLayout(margins: Margins, containerWidth: number, containerHeight: number, isRtl: boolean): {
+    sankey: SankeyLayoutGenerator;
+    height: number;
+    width: number;
+};
+
+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;
+}
+
+export declare const SankeyChart: React_2.FunctionComponent<SankeyChartProps>;
+
+/**
+ * Set of strings which are used when rendering accessibility information within the chart.
+ */
+export declare interface SankeyChartAccessibilityProps {
+    /**
+     * Aria label for when the chart is empty.
+     */
+    emptyAriaLabel?: string;
+    /**
+     * A value similar to "node \{0\} with weight \{1\}".
+     * \{0\} is the name of the node.
+     * \{1\} is the weight of the node (as computed by the sankey layout engine via the links to or from this node).
+     */
+    nodeAriaLabel?: string;
+    /**
+     * A value similar to "link from \{0\} to $\{1\} with weight $\{2\}".
+     * \{0\} is the source node, \{1\} is the target node, and \{2\} is the value of the link.
+     */
+    linkAriaLabel?: string;
+}
+
+/**
+ * {@docCategory ChartData}
+ */
+export declare interface SankeyChartData {
+    nodes: SNode[];
+    links: SLink[];
+}
+
+/**
+ * Sankey Chart properties
+ * {@docCategory SankeyChart}
+ */
+export declare interface SankeyChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data: ChartProps;
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * Height of the chart.
+     */
+    height?: number;
+    /**
+     * Additional CSS class(es) to apply to the SankeyChart.
+     */
+    className?: string;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: SankeyChartStyles;
+    /**
+     * this prop takes its parent as a HTML element to define the width and height of the Sankey chart
+     */
+    parentRef?: HTMLElement | null;
+    /**
+     * should chart resize when parent resize.
+     */
+    shouldResize?: number;
+    /**
+     * Color for path
+     */
+    pathColor?: string;
+    /**
+     * Colors for nodes
+     */
+    colorsForNodes?: string[];
+    /**
+     * Colors for nodes border
+     */
+    borderColorsForNodes?: string[];
+    /**
+     * Localized strings to show in the UX.
+     */
+    strings?: SankeyChartStrings;
+    /**
+     * Localized strings to use for the chart's accessibility features.
+     */
+    accessibility?: SankeyChartAccessibilityProps;
+    /**
+     * Format node and link values.
+     */
+    formatNumberOptions?: Intl.NumberFormatOptions;
+    /**
+     * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+     * @default true
+     */
+    enableReflow?: boolean;
+    /**
+     * Optional callback to access the Chart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: RefObject<Chart>;
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: ChartPopoverProps;
+}
+
+/**
+ * Set of strings which are used when rendering the chart.
+ */
+export declare interface SankeyChartStrings {
+    /**
+     * A value similar to "from \{0\}" where \{0\} is the name of the source node for a link.
+     * This is shown in the `ChartHoverCard` when the user hovers the mouse over a link.
+     */
+    linkFrom?: string;
+}
+
+/**
+ * Sankey Chart styles
+ * {@docCategory SankeyChart}
+ */
+export declare interface SankeyChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root?: string;
+    /**
+     *  Style for the nodes.
+     */
+    nodes?: string;
+    /**
+     *  Style for the links.
+     */
+    links?: string;
+    /**
+     *  Style for the text inside node.
+     */
+    nodeTextContainer?: string;
+    /**
+     *  Style for the tooltip ,when user hover over the truncated node detail.
+     */
+    toolTip?: string;
+    /**
+     * Styles for the chart wrapper div
+     */
+    chartWrapper?: string;
+}
+
+declare type SankeyLayoutGenerator = SankeyLayout<SankeyGraph<{}, {}>, {}, {}>;
+
+/**
+ * ScatterChart component
+ * {@docCategory ScatterChart}
+ */
+export declare const ScatterChart: React_2.FunctionComponent<ScatterChartProps>;
+
+/**
+ * {@docCategory ChartData}
+ * ScatterChartDataPoint interface.
+ */
+export declare interface ScatterChartDataPoint extends BaseDataPoint {
+    /**
+     * Independent value of the data point, rendered along the x-axis.
+     */
+    x: number | Date | string;
+    /**
+     * Dependent value of the data point, rendered along the y-axis.
+     */
+    y: number;
+    /**
+     * Marker size of the points
+     */
+    markerSize?: number;
+}
+
+/**
+ * Line Chart properties
+ * {@docCategory LineChart}
+ */
+export declare interface ScatterChartProps 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?: ScatterChartStyles;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
+    /**
+     * Callback for getting callout description message
+     */
+    getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+
+/**
+ * Scatter Chart style properties
+ * {@docCategory ScatterChart}
+ */
+export declare interface ScatterChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Scatter Chart styles
+ * {@docCategory ScatterChart}
+ */
+export declare interface ScatterChartStyles extends CartesianChartStyles {
+}
+
+/**
+ * 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;
+}
+
+export declare type SLink = SankeyLink<SNodeExtra, SLinkExtra>;
+
+declare interface SLinkExtra {
+    /**
+     * The index within `ISankeyChartData.nodes` of the source node.
+     */
+    source: number;
+    /**
+     * The index within `ISankeyChartData.nodes` of the target node.
+     */
+    target: number;
+    /**
+     * The weight of this link between the two nodes.
+     */
+    value: number;
+    unnormalizedValue?: number;
+}
+
+export declare type SNode = SankeyNode<SNodeExtra, SLinkExtra>;
+
+declare interface SNodeExtra {
+    /**
+     * A unique identifier for this node.
+     */
+    nodeId: number | string;
+    /**
+     * The display name for this node in the UX.
+     */
+    name: string;
+    color?: string;
+    borderColor?: string;
+    actualValue?: number;
+    layer?: number;
+}
+
+/**
+ * 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;
+    /**
+     * @default false
+     * The prop used to enable gradient fill color for the chart.
+     */
+    enableGradient?: boolean;
+    /**
+     * @default false
+     * The prop used to enable rounded corners for the chart.
+     */
+    roundCorners?: boolean;
+    /**
+     * Specifies the mode of the chart.
+     * @default 'default'
+     */
+    mode?: 'default' | 'plotly';
+}
+
+/**
+ * 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;
+}
+
+export declare const VerticalStackedBarChart: React_2.FunctionComponent<VerticalStackedBarChartProps>;
+
+/**
+ * Vertical Stacked Bar Chart properties
+ * {@docCategory VerticalStackedBarChart}
+ */
+export declare interface VerticalStackedBarChartProps extends CartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data: VerticalStackedChartProps[];
+    /**
+     * 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.
+     */
+    barWidth?: number | 'default' | 'auto';
+    /**
+     * Gap (max) between bars in a stack. When non-zero, the bars in a stack will
+     * be separated by gaps. The actual size of each gap is calculated as 20% of
+     * the height of that stack, with a minimum size of 1px and a maximum given by
+     * this prop.
+     * @default 0
+     */
+    barGapMax?: number;
+    /**
+     * Corner radius of the bars
+     * @default 0
+     */
+    barCornerRadius?: number;
+    /**
+     * The minimum height of a bar; bars below this height will be displayed at
+     * this height. Note that this setting will result in the height of these data
+     * points not being to scale.
+     * @default 0
+     */
+    barMinimumHeight?: number;
+    /**
+     * chart title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * To display multi stack callout or single callout
+     * @default flase
+     */
+    isCalloutForStack?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: VerticalStackedBarChartStyles;
+    /**
+     * Define a custom callout renderer for a stack; default is to render per data point
+     */
+    onRenderCalloutPerStack?: RenderFunction<VerticalStackedChartProps>;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: RenderFunction<VSChartDataPoint>;
+    /**
+     * yMinValue is not supported for bar charts, so only allow "undefined"
+     */
+    yMinValue?: undefined;
+    /**
+     * Allow hover actions on the legend
+     * @default true
+     */
+    allowHoverOnLegend?: boolean;
+    /**
+     * Click handler for bars; type of data is dependant on isCalloutForStack
+     */
+    onBarClick?: (event: React_2.MouseEvent<SVGElement>, data: VerticalStackedChartProps | VSChartDataPoint) => void;
+    /**
+     * 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;
+    /**
+     * @default false
+     * The prop used to enable gradient fill color for the chart.
+     */
+    enableGradient?: boolean;
+    /**
+     * @default false
+     * The prop used to enable rounded corners for the chart.
+     */
+    roundCorners?: boolean;
+    /**
+     * Specifies the mode of the chart.
+     * @default 'default'
+     */
+    mode?: 'default' | 'plotly';
+}
+
+/**
+ * Vertical Stacked Bar Chart style properties
+ * {@docCategory VerticalStackedBarChart}
+ */
+export declare interface VerticalStackedBarChartStyleProps extends CartesianChartStyleProps {
+}
+
+/**
+ * Vertical Stacked Bar Chart styles
+ * {@docCategory VerticalStackedBarChart}
+ */
+export declare interface VerticalStackedBarChartStyles extends CartesianChartStyles {
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover?: string;
+    /**
+     * 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;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+
+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 { }