@fluentui/react-charts 9.0.1 → 9.0.3

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 /// <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';
 
@@ -22,6 +28,115 @@ export declare interface AccessibilityProps {
     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;
@@ -48,6 +163,14 @@ export declare interface Basestate {
     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}
@@ -256,6 +379,11 @@ export declare interface CartesianChartProps {
      * @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
@@ -521,6 +649,10 @@ export declare interface ChartProps {
      * 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
      */
@@ -538,7 +670,8 @@ declare enum ChartTypes {
     VerticalStackedBarChart = 3,
     GroupedVerticalBarChart = 4,
     HeatMapChart = 5,
-    HorizontalBarChartWithAxis = 6
+    HorizontalBarChartWithAxis = 6,
+    ScatterChart = 7
 }
 
 export declare interface ChildProps {
@@ -817,6 +950,15 @@ export declare interface DonutChartStyles {
     chartWrapper?: string;
 }
 
+export declare interface DPointType {
+    values: {
+        0: number;
+        1: number;
+        data: {};
+    };
+    xVal: number | Date;
+}
+
 declare interface EventAnnotation {
     date: Date;
     event: string;
@@ -835,192 +977,670 @@ export declare interface EventsAnnotationProps {
     mergedLabel: (count: number) => string;
 }
 
-export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
+export declare interface ExtendedSegment extends GaugeChartSegment {
+    start: number;
+    end: number;
+}
 
-export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
+export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
 
 /**
- * {@docCategory ChartData}
+ * Gauge Chart properties
+ * {@docCategory GaugeChart}
  */
-export declare interface GroupedVerticalBarChartData {
+export declare interface GaugeChartProps {
     /**
-     * Data for X axis label
+     * Width of the chart
      */
-    name: string;
+    width?: number;
     /**
-     * Data points for Grouped vertical bar chart
+     * Height of the chart
      */
-    series: GVBarChartSeriesPoint[];
+    height?: number;
     /**
-     * Accessibility data for Group Bars Stack Callout
+     * Title of the chart
      */
-    stackCallOutAccessibilityData?: AccessibilityProps;
-}
-
-/**
- * {@docCategory ChartData}
- */
-export declare interface GVBarChartSeriesPoint {
+    chartTitle?: string;
     /**
-     * Text for // need to check use of this
+     * Current value of the gauge
      */
-    key: string;
+    chartValue: number;
     /**
-     * Data for bar height of Grouped vertical bar chart
+     * Sections of the gauge
      */
-    data: number;
+    segments: GaugeChartSegment[];
     /**
-     * Color for the legend in the chart
+     * Minimum value of the gauge
+     * @defaultvalue 0
      */
-    color: string;
+    minValue?: number;
     /**
-     * Legend text in the chart
+     * Maximum value of the gauge
      */
-    legend: string;
+    maxValue?: number;
     /**
-     * Callout data for x axis
-     * This is an optional prop, If haven;t given legend will take
+     * Additional text to display below the chart value
      */
-    xAxisCalloutData?: string;
+    sublabel?: string;
     /**
-     * Callout data for y axis
-     * This is an optional prop, If haven't given data will take
+     * Hide the min and max values of the gauge
+     * @defaultvalue false
      */
-    yAxisCalloutData?: string;
+    hideMinMax?: boolean;
     /**
-     * onClick action for each datapoint in the chart
+     * Format of the chart value
+     * @defaultvalue GaugeValueFormat.Percentage
      */
-    onClick?: VoidFunction;
+    chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string);
     /**
-     * Accessibility data for callout
+     * Decides whether to show/hide legends
+     * @defaultvalue false
      */
-    callOutAccessibilityData?: AccessibilityProps;
-}
-
-export declare interface GVDataPoint {
+    hideLegend?: boolean;
+    legendProps?: Partial<LegendsProps>;
     /**
-     * This interface used for - While forming datapoints from given prop "data" in code
-     * datapoints are used for to draw graph
+     * Do not show tooltips in chart
+     * @defaultvalue false
      */
-    [key: string]: number | string;
-}
-
-export declare interface GVForBarChart {
+    hideTooltip?: boolean;
     /**
-     * While forming datapoints from given prop "data"
-     * These datapoints are used for to draw graph.
+     * Call to provide customized styling that will layer on top of the variant rules
      */
-    [key: string]: GVBarChartSeriesPoint;
-}
-
-export declare interface GVSingleDataPoint {
+    styles?: GaugeChartStyles;
     /**
-     * While forming datapoints from given prop "data" in code.
-     * These datapoints are used for to draw graph easily.
+     * Defines the culture to localize the numbers and dates
      */
-    [key: string]: GVDataPoint;
+    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>;
 }
 
 /**
- * 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.
+ * Gauge Chart segment interface.
+ * {@docCategory GaugeChart}
  */
-export declare const HorizontalBarChart: React_2.FunctionComponent<HorizontalBarChartProps>;
+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;
+}
 
 /**
- * Horizontal Bar Chart properties
- * {@docCategory HorizontalBarChart}
+ * Gauge Chart styles
+ * {@docCategory GaugeChart}
  */
-export declare interface HorizontalBarChartProps extends React_2.RefAttributes<HTMLDivElement> {
+export declare interface GaugeChartStyles {
     /**
-     * An array of chart data points for the Horizontal bar chart
+     * Styles for the root element
      */
-    data?: ChartProps[];
+    root?: string;
     /**
-     * Width of bar chart
+     * Styles for the chart
      */
-    width?: number;
+    chart?: string;
     /**
-     * Height of bar chart
-     * @default 15
+     * Styles for the min and max values
      */
-    barHeight?: number;
+    limits?: string;
     /**
-     * Additional CSS class(es) to apply to the StackedBarChart.
+     * Styles for the chart value
      */
-    className?: string;
+    chartValue?: string;
     /**
-     * This property tells whether to show ratio on top of stacked bar chart or not.
+     * Styles for the sublabel
      */
-    hideRatio?: boolean[];
+    sublabel?: string;
     /**
-     * Do not show tooltips in chart
-     *
-     * @default false
+     * Styles for the needle
      */
-    hideTooltip?: boolean;
+    needle?: string;
     /**
-     * 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'
+     * Styles for the chart title
      */
-    chartDataMode?: ChartDataMode;
+    chartTitle?: string;
     /**
-     * Call to provide customized styling that will layer on top of the variant rules.
+     * Styles for the segments
      */
-    styles?: HorizontalBarChartStyles;
+    segment?: string;
     /**
-     * Define a custom callout renderer for a horizontal bar
+     * Styles for gradient segments
      */
+    gradientSegment?: string;
     /**
-     * props for the callout in the chart
+     * Styles for the legends container
      */
-    calloutProps?: ChartPopoverProps;
+    legendsContainer?: string;
     /**
-     * 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.
+     * Styles for callout root-content
      */
+    calloutContentRoot?: string;
     /**
-     * The prop used to define the culture to localized the numbers
+     * Styles for callout x-content
      */
-    culture?: string;
+    calloutContentX?: string;
     /**
-     * Prop to define the variant of HorizontalBarChart to render
-     * @default HorizontalBarChartVariant.PartToWhole
+     * Styles for callout y-content
      */
-    variant?: HorizontalBarChartVariant;
+    calloutContentY?: string;
     /**
-     * Prop to hide the bar labels
-     * @default false
+     * Styles for description message
      */
-    hideLabels?: boolean;
+    descriptionMessage?: string;
     /**
-     * line color for callout
+     * Styles for callout Date time container
      */
-    color?: string;
+    calloutDateTimeContainer?: string;
     /**
-     * prop to check if benchmark data is provided
+     * Styles for callout info container
      */
-    showTriangle?: boolean;
-    legendsOverflowText?: any;
-    legendProps?: Partial<LegendsProps>;
+    calloutInfoContainer?: string;
     /**
-     * prop to render the custom callout
+     * Styles for callout block container
      */
-    onRenderCalloutPerHorizontalBar?: (props: ChartDataPoint) => JSX.Element | undefined;
+    calloutBlockContainer?: string;
     /**
-     * Define a custom callout props override
+     * Styles for callout legend text
      */
-    calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
+    calloutlegendText?: string;
+    /**
+     * Styles for the shape object in the callout
+     */
+    shapeStyles?: string;
 }
 
 /**
- * Horizontal Bar Chart styles
- * {@docCategory HorizontalBarChart}
+ * {@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 {
     /**
@@ -1085,6 +1705,8 @@ export declare enum HorizontalBarChartVariant {
     AbsoluteScale = "absolute-scale"
 }
 
+export declare const HorizontalBarChartWithAxis: React_2.FunctionComponent<HorizontalBarChartWithAxisProps>;
+
 /**
  * {@docCategory ChartData}
  */
@@ -1127,6 +1749,128 @@ export declare interface HorizontalBarChartWithAxisDataPoint {
     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}
  */
@@ -1276,20 +2020,55 @@ export declare interface LegendsProps {
      */
     canSelectMultipleLegends?: boolean;
     /**
-     * Callback issued when the selected option changes.
+     * 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.
      */
-    onChange?: (selectedLegends: string[], event: React_2.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;
+    defaultSelectedLegend?: string;
     /**
-     * Keys (title) that will be initially used to set selected items.
-     * This prop is used for multiSelect scenarios.
-     * In other cases, defaultSelectedLegend should be used.
+     * 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`.
      */
-    defaultSelectedLegends?: string[];
+    selectedLegends?: string[];
     /**
-     * Key that will be initially used to set selected item.
-     * This prop is used for singleSelect scenarios.
+     * 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`.
      */
-    defaultSelectedLegend?: string;
+    selectedLegend?: string;
     /**
      * The shape for the legend.
      */
@@ -1366,43 +2145,15 @@ export declare const LineChart: React_2.FunctionComponent<LineChartProps>;
 /**
  * {@docCategory ChartData}
  */
-export declare interface LineChartDataPoint {
+export declare interface LineChartDataPoint extends BaseDataPoint {
     /**
      * Independent value of the data point, rendered along the x-axis.
-     * If x is a number, then each y-coordinate is plotted at its x-coordinate.
-     * If data type on x is Date, then the data is spaced evenly by d3-scale
      */
     x: number | Date;
     /**
      * Dependent value of the data point, rendered along the y-axis.
      */
     y: number;
-    /**
-     * Defines the function that is executed on clicking  line
-     */
-    onDataPointClick?: () => void;
-    /**
-     * Callout data for x axis
-     */
-    xAxisCalloutData?: string;
-    /**
-     * Callout data for y axis
-     */
-    yAxisCalloutData?: string | {
-        [id: string]: number;
-    };
-    /**
-     * Whether to hide callout data for the point.
-     */
-    hideCallout?: boolean;
-    /**
-     * Accessibility data for callout
-     */
-    callOutAccessibilityData?: AccessibilityProps;
-    /**
-     * X axis Accessibility data for callout
-     */
-    xAxisCalloutAccessibilityData?: AccessibilityProps;
 }
 
 /**
@@ -1453,6 +2204,11 @@ export declare interface LineChartLineOptions extends SVGProps<SVGPathElement> {
      * 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;
 }
 
 /**
@@ -1471,7 +2227,7 @@ export declare interface LineChartPoints {
     /**
      * dataPoints for the line chart
      */
-    data: LineChartDataPoint[];
+    data: LineChartDataPoint[] | ScatterChartDataPoint[];
     /**
      * gaps in the line chart where a line is not drawn
      */
@@ -1604,6 +2360,15 @@ export declare interface LineDataInVerticalStackedBarChart {
      * False by default.
      */
     useSecondaryYScale?: boolean;
+    /**
+     * options for the line drawn
+     */
+    lineOptions?: LineChartLineOptions;
+}
+
+export declare interface MapXToDataSet {
+    [key: string]: LineChartDataPoint[];
+    [key: number]: LineChartDataPoint[];
 }
 
 /**
@@ -1668,126 +2433,358 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
      * 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;
+    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;
     /**
-     * Used for bar chart graphs.
-     * To define width of the bar
+     *  Style for the links.
      */
-    barwidth?: number;
+    links?: string;
     /**
-     * Used for tick styles of the x axis of the chart
-     * Tick params are applicable for date axis only.
+     *  Style for the text inside node.
      */
-    tickParams?: {
-        tickValues?: number[] | Date[] | string[];
-        tickFormat?: string;
-    };
+    nodeTextContainer?: string;
     /**
-     * it's padding between bar's or lines in the graph
+     *  Style for the tooltip ,when user hover over the truncated node detail.
      */
-    xAxisPadding?: number;
+    toolTip?: string;
     /**
-     * it's padding between bar's or lines in the graph
+     * Styles for the chart wrapper div
      */
-    yAxisPadding?: number;
+    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 {
     /**
-     * Children elements specific to derived chart types.
+     * Independent value of the data point, rendered along the x-axis.
      */
-    children(props: ChildProps): React_2.ReactNode;
-    /** dataset values to find out domain of the String axis
-     * Present using for only vertical stacked bar chart and grouped vertical bar chart
+    x: number | Date | string;
+    /**
+     * Dependent value of the data point, rendered along the y-axis.
      */
-    datasetForXAxisDomain?: string[];
+    y: number;
     /**
-     * if the data points for the y-axis is of type string, then we need to give this
-     * prop to construct the y-axis
+     * Marker size of the points
      */
-    stringDatasetForYAxisDomain?: string[];
+    markerSize?: number;
+}
+
+/**
+ * Line Chart properties
+ * {@docCategory LineChart}
+ */
+export declare interface ScatterChartProps extends CartesianChartProps {
     /**
-     * The prop used to define the culture to localize the numbers and date
+     * Data to render in the chart.
      */
-    culture?: string;
-    getAxisData?: any;
+    data: ChartProps;
     /**
-     * Callback method used when mouse leaves the chart boundary.
+     * Call to provide customized styling that will layer on top of the variant rules.
      */
-    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;
+    styles?: ScatterChartStyles;
     /**
-     *@default false
-     *Used for to elipse y axis labes and show tooltip on x axis labels
+     * Define a custom callout renderer for a data point
      */
-    showYAxisLablesTooltip?: boolean;
+    onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
     /**
-     *@default false
-     *Used for showing complete y axis lables   */
-    showYAxisLables?: boolean;
+     * Callback for getting callout description message
+     */
+    getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;
     /**
-     * @default false
-     * Used to control the first render cycle Performance optimization code.
+     * The prop used to define the culture to localized the numbers
      */
-    enableFirstRenderOptimization?: boolean;
+    culture?: string;
 }
 
 /**
- * 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
+ * Scatter Chart style properties
+ * {@docCategory ScatterChart}
  */
-declare enum Points {
-    circle = 0,
-    square = 1,
-    triangle = 2,
-    diamond = 3,
-    pyramid = 4,
-    hexagon = 5,
-    pentagon = 6,
-    octagon = 7
-}
-
-export declare interface PopoverComponentStyles {
-    calloutContentRoot: string;
-    calloutDateTimeContainer: string;
-    calloutContentX: string;
-    calloutBlockContainer: string;
-    calloutBlockContainertoDrawShapefalse: string;
-    calloutBlockContainertoDrawShapetrue: string;
-    shapeStyles: string;
-    calloutlegendText: string;
-    calloutContentY: string;
-    descriptionMessage: string;
-    ratio: string;
-    numerator: string;
-    denominator: string;
-    calloutInfoContainer: string;
-    calloutContainer: string;
-}
-
-export declare interface RefArrayData {
-    index?: string;
-    refElement?: SVGGElement;
+export declare interface ScatterChartStyleProps extends CartesianChartStyleProps {
 }
 
 /**
- * Render function interface for providing overrideable render callbacks.
- *
- * @public
+ * Scatter Chart styles
+ * {@docCategory ScatterChart}
  */
-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 interface ScatterChartStyles extends CartesianChartStyles {
 }
 
 /**
@@ -1811,6 +2808,41 @@ export declare interface ShapeProps {
     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.
@@ -2019,6 +3051,21 @@ export declare interface VerticalBarChartProps extends CartesianChartProps {
      * 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';
 }
 
 /**
@@ -2043,6 +3090,149 @@ export declare interface VerticalBarChartStyles extends CartesianChartStyles {
     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}
  */
@@ -2113,6 +3303,10 @@ export declare interface VSChartDataPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: AccessibilityProps;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
 }
 
 declare enum XAxisTypes {