Rounded Tick Values in Declarative charts

change/@fluentui-react-charting-ea816697-9232-4117-8d82-fd6fbacb2acb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Rounded Ticks functionality in declarative charts.",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/etc/react-charting.api.md

@@ -288,6 +288,7 @@ export interface ICartesianChartProps {
     noOfCharsToTruncate?: number;
     parentRef?: HTMLElement | null;
     rotateXAxisLables?: boolean;
+    roundedTicks?: boolean;
     secondaryYAxistitle?: string;
     secondaryYScaleOptions?: {
         yMinValue?: number;
@@ -1078,7 +1079,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined) => ScaleBand<string>;
     // Warning: (ae-forgotten-export) The symbol "IYAxisParams" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "IAxisData" needs to be exported by the entry point index.d.ts
-    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean) => ScaleLinear<number, number, never>;
+    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean) => ScaleLinear<number, number, never>;
     culture?: string;
     customizedCallout?: any;
     datasetForXAxisDomain?: string[];

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -422,6 +422,7 @@ export class CartesianChartBase
           this.isIntegralDataset,
           false,
           this.props.supportNegativeData!,
+          this.props.roundedTicks!,
         );
       }
 

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -447,6 +447,12 @@ export interface ICartesianChartProps {
    */
   supportNegativeData?: boolean;
 
+  /**
+   * @default false
+   * The prop used to decide rounded ticks on y axis
+   */
+  roundedTicks?: boolean;
+
   /**
    * Optional callback to access the IChart interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
@@ -665,6 +671,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     isIntegralDataset: boolean,
     useSecondaryYScale?: boolean,
     supportNegativeData?: boolean,
+    roundedTicks?: boolean,
   ) => ScaleLinear<number, number, never>;
 
   /**

packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts

@@ -29,7 +29,8 @@ import { /* DataVizPalette,  */ getNextColor } from '../../utilities/colors';
 import { GaugeChartVariant, IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
-import { Layout, PlotlySchema, PieData, PlotData, SankeyData } from './PlotlySchema';
+import { findNumericMinMaxOfY } from '../../utilities/utilities';
+import { Layout, PlotlySchema, PieData, PlotData, SankeyData, Dash } from './PlotlySchema';
 import type { Datum, TypedArray } from './PlotlySchema';
 
 const isDate = (value: any): boolean => !isNaN(Date.parse(value));
@@ -414,9 +415,11 @@ export const transformPlotlyJsonToScatterChartProps = (
     const isXNumber = isNumberArray(xValues);
     const legend: string = series.name || `Series ${index + 1}`;
     const lineColor = getColor(legend, colorMap, isDarkTheme);
-
     return {
       legend,
+      lineOptions: ['dot', 'dash', 'longdash', 'dashdot', 'longdashdot'].includes(series.line?.dash as Dash)
+        ? { strokeDasharray: '5', strokeLinecap: 'butt', strokeWidth: '2', lineBorderWidth: '4' }
+        : {},
       data: xValues.map((x, i: number) => ({
         x: isString ? (isXDate ? new Date(x as string) : isXNumber ? parseFloat(x as string) : x) : x,
         y: series.y[i],
@@ -425,6 +428,7 @@ export const transformPlotlyJsonToScatterChartProps = (
     } as ILineChartPoints;
   });
 
+  const yMinMaxValues = findNumericMinMaxOfY(chartData);
   const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
 
   const chartProps: IChartProps = {
@@ -445,6 +449,9 @@ export const transformPlotlyJsonToScatterChartProps = (
       supportNegativeData: true,
       xAxisTitle,
       yAxisTitle,
+      roundedTicks: true,
+      yMinValue: yMinMaxValues.startValue,
+      yMaxValue: yMinMaxValues.endValue,
     } as ILineChartProps;
   }
 };