support custom marker size of points

packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx

@@ -824,7 +824,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               <circle
                 id={circleId}
                 key={circleId}
-                r={this._points[i].data[j - 1].markerSize || 4}
+                r={this._points[i].data[j - 1].markerSize ?? 4}
                 cx={this._xAxisScale(x1)}
                 cy={this._yAxisScale(y1)}
                 data-is-focusable={isLegendSelected}
@@ -917,7 +917,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   <circle
                     id={lastCircleId}
                     key={lastCircleId}
-                    r={this._points[i].data[j - 1].markerSize || 4}
+                    r={this._points[i].data[j].markerSize ?? 4}
                     cx={this._xAxisScale(x2)}
                     cy={this._yAxisScale(y2)}
                     data-is-focusable={isLegendSelected}

packages/charts/react-charting/src/utilities/utilities.ts

@@ -43,6 +43,7 @@ import {
 } from '../index';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 
+let maxMarkerSize = 0;
 export type NumericAxis = D3Axis<number | { valueOf(): number }>;
 export type StringAxis = D3Axis<string>;
 
@@ -445,7 +446,16 @@ export function createNumericYAxis(
     : yMinMaxValues.startValue < yMinValue
     ? 0
     : yMinValue!;
-  const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks);
+  const maxMarkerSizeInPixelsForYAxis = maxMarkerSize
+    ? (maxMarkerSize * (finalYmin - finalYmax)) / (margins.top! - containerHeight + margins.bottom! + 2 * maxMarkerSize)
+    : 0;
+  const domainValues = prepareDatapoints(
+    finalYmax + maxMarkerSizeInPixelsForYAxis,
+    finalYmin - maxMarkerSizeInPixelsForYAxis,
+    yAxisTickCount,
+    isIntegralDataset,
+    roundedTicks,
+  );
   const yAxisScale = d3ScaleLinear()
     .domain([supportNegativeData ? domainValues[0] : finalYmin, domainValues[domainValues.length - 1]])
     .range([containerHeight - margins.bottom!, margins.top! + (eventAnnotationProps! ? eventLabelHeight! : 0)]);
@@ -906,12 +916,30 @@ export function domainRangeOfNumericForAreaChart(
     });
   })!;
 
+  maxMarkerSize = d3Max(points, (point: ILineChartPoints) => {
+    return d3Max(point.data, (item: ILineChartDataPoint) => {
+      return item.markerSize as number;
+    });
+  })!;
+  const maxMarkerSizeInPixelsForXAxis = maxMarkerSize
+    ? (maxMarkerSize * (xMax - xMin)) / (width - margins.right! - margins.left! - 2 * maxMarkerSize)
+    : 0;
   const rStartValue = margins.left!;
   const rEndValue = width - margins.right!;
 
   return isRTL
-    ? { dStartValue: xMax, dEndValue: xMin, rStartValue, rEndValue }
-    : { dStartValue: xMin, dEndValue: xMax, rStartValue, rEndValue };
+    ? {
+        dStartValue: xMax + maxMarkerSizeInPixelsForXAxis,
+        dEndValue: xMin - maxMarkerSizeInPixelsForXAxis,
+        rStartValue,
+        rEndValue,
+      }
+    : {
+        dStartValue: xMin - maxMarkerSizeInPixelsForXAxis,
+        dEndValue: xMax + maxMarkerSizeInPixelsForXAxis,
+        rStartValue,
+        rEndValue,
+      };
 }
 
 /**