@fluentui/react-charts 9.0.2 → 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,8 +28,83 @@ 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}
  */
@@ -298,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
@@ -563,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
      */
@@ -860,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;
@@ -971,6 +1070,11 @@ export declare interface GaugeChartProps {
      * @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>;
 }
 
 /**
@@ -1095,6 +1199,8 @@ 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;
@@ -1211,6 +1317,11 @@ export declare interface GroupedVerticalBarChartStyles extends CartesianChartSty
     barLabel: string;
 }
 
+/**
+ * This is used to group nodes by column index.
+ */
+export declare function groupNodesByColumn(graph: SankeyChartData): NodesInColumns;
+
 /**
  * {@docCategory ChartData}
  */
@@ -1275,6 +1386,161 @@ export declare interface GVSingleDataPoint {
     [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.
@@ -1439,6 +1705,8 @@ export declare enum HorizontalBarChartVariant {
     AbsoluteScale = "absolute-scale"
 }
 
+export declare const HorizontalBarChartWithAxis: React_2.FunctionComponent<HorizontalBarChartWithAxisProps>;
+
 /**
  * {@docCategory ChartData}
  */
@@ -1481,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}
  */
@@ -1814,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;
 }
 
 /**
@@ -1965,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[];
 }
 
 /**
@@ -2055,10 +2459,18 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
      * 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
@@ -2095,6 +2507,10 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
     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
@@ -2128,6 +2544,12 @@ export declare interface PopoverComponentStyles {
     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;
@@ -2151,6 +2573,154 @@ declare interface ResponsiveContainerProps {
     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}
@@ -2238,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.
@@ -2446,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';
 }
 
 /**
@@ -2470,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}
  */
@@ -2540,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 {