@fluentui/react-charting 5.12.26 → 5.12.29

package/src/components/CommonComponents/CartesianChart.types.ts

@@ -40,7 +40,7 @@ export interface ICartesianChartStyleProps {
   href?: string;
 
   /**
-   * prop to check if the chart is selcted or hovered upon to determine opacity
+   * prop to check if the chart is selected or hovered upon to determine opacity
    */
   shouldHighlight?: boolean;
 
@@ -112,20 +112,23 @@ export interface ICartesianChartStyles {
   calloutDateTimeContainer?: IStyle;
 
   /**
-   * styles for callout Date time container
+   * styles for callout info container
    */
   calloutInfoContainer?: IStyle;
 
   /**
-   * styles for callout Date time container
+   * styles for callout block container
    */
   calloutBlockContainer?: IStyle;
 
   /**
-   * styles for callout y-content
+   * styles for callout legend text
    */
   calloutlegendText?: IStyle;
 
+  /**
+   * styles for tooltip
+   */
   tooltip?: IStyle;
 
   /**
@@ -139,7 +142,7 @@ export interface ICartesianChartStyles {
   opacityChangeOnHover?: IStyle;
 
   /**
-   * styles set for the shape object in the callout
+   * styles for the shape object in the callout
    */
   shapeStyles?: IStyle;
 }
@@ -200,8 +203,9 @@ export interface ICartesianChartProps {
   tickValues?: number[] | Date[];
 
   /**
-   * the format in for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'
-   * Please look at https://www.npmjs.com/package/d3-time-format for all the formats supported
+   * 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;
 
@@ -211,7 +215,7 @@ export interface ICartesianChartProps {
   strokeWidth?: number;
 
   /**
-   * x Axis labels tick padding
+   * x Axis labels tick padding. This defines the gap between tick labels and tick lines.
    * @default 10
    */
   xAxisTickPadding?: number;
@@ -236,25 +240,26 @@ export interface ICartesianChartProps {
 
   /**
    * Number of ticks on the y-axis.
-   * Tick count should be factor of difference between (yMinValue, yMaxValue)
+   * Tick count should be factor of difference between (yMinValue, yMaxValue)?
    * @default 4
    */
   yAxisTickCount?: number;
 
   /**
-   * defines the number of ticks on the x-axis
+   * 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 on the x-axis
+   * define the size of the tick lines on the x-axis
    * @default 10
    */
   xAxistickSize?: number;
 
   /**
-   * define the space between the tick and the data point
+   * defines the space between the tick line and the data label
    * @default 10
    */
   tickPadding?: number;
@@ -308,7 +313,7 @@ export interface ICartesianChartProps {
 
   /**
    * @default false
-   * Used to display x axis labels values (whole value)
+   * Used to wrap x axis labels values (whole value)
    */
   wrapXAxisLables?: boolean;
 
@@ -385,7 +390,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
   yAxisType?: YAxisType;
 
   /**
-   * Legeds of the chart.
+   * Legends of the chart.
    */
   legendBars: JSX.Element;
 
@@ -426,6 +431,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
 
   /**
    * Used for tick styles of the x axis of the chart
+   * Tick params are applicable for date axis only.
    */
   tickParams?: {
     tickValues?: number[] | Date[];
@@ -442,10 +448,13 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
    */
   yAxisPadding?: number;
 
+  /**
+   * Children elements specific to derived chart types.
+   */
   children(props: IChildProps): React.ReactNode;
 
   /**
-   * To enable callout for bar. Using for only Vertical stacked bar chart.
+   * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart.
    * @default false
    * @type {boolean}
    */
@@ -483,7 +492,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
   svgFocusZoneProps?: IFocusZoneProps;
 
   /**
-   * The prop used to define the culture to localized the numbers
+   * The prop used to define the culture to localize the numbers
    */
   culture?: string;
 

package/src/components/Legends/Legends.types.ts

@@ -105,7 +105,7 @@ export interface ILegend {
   shape?: LegendShape;
 
   /**
-   * Indicated whether of not to apply stripe pattern
+   * Indicated whether or not to apply stripe pattern
    */
   stripePattern?: boolean;
 

package/src/components/StackedBarChart/MultiStackedBarChart.types.ts

@@ -35,6 +35,7 @@ export interface IMultiStackedBarChartProps {
 
   /**
    * This property tells whether to show ratio on top of stacked bar chart or not.
+   * This property is applicable only if there are 1 or 2 datapoints.
    */
   hideRatio?: boolean[];
 
@@ -64,6 +65,7 @@ export interface IMultiStackedBarChartProps {
 
   /**
    * If this value is set to true the denominator will not be shown for the ratio above the chart
+   * This prop is applicable only if hide ratio is false and there are exactly 2 datapoints.
    */
   hideDenominator?: boolean[];