diff --git a/change/@fluentui-react-charting-48ec930a-4a1f-4ee2-bd2d-bdaf4b06fbb0.json b/change/@fluentui-react-charting-48ec930a-4a1f-4ee2-bd2d-bdaf4b06fbb0.json
new file mode 100644
index 00000000000000..4f0a25871f99e6
--- /dev/null
+++ b/change/@fluentui-react-charting-48ec930a-4a1f-4ee2-bd2d-bdaf4b06fbb0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable chart selection based on legends in declarative charts",
+  "packageName": "@fluentui/react-charting",
+  "email": "74965306+Anush2303@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx
index fef7e6965c59d7..686fe0babe863b 100644
--- a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -124,7 +124,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     super(props);
     this._createSet = memoizeFunction(this._createDataSet);
     this.state = {
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       activeLegend: '',
       hoverXValue: '',
       isCalloutVisible: false,
diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
index 95041e3f7841e3..e531b39dd3fe72 100644
--- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
+++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
@@ -73,7 +73,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       color: '',
       xCalloutValue: '',
       yCalloutValue: '',
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       focusedArcId: '',
     };
     this._hoverCallback = this._hoverCallback.bind(this);
diff --git a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
index 2913d3bebf2383..87102b1ebacd3b 100644
--- a/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
+++ b/packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
@@ -141,7 +141,7 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
 
     this.state = {
       hoveredLegend: '',
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       focusedElement: '',
       calloutTarget: null,
       isCalloutVisible: false,
diff --git a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
index 97d08b9e3a0dd8..a35d3ff5b70651 100644
--- a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
+++ b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
@@ -109,7 +109,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
       dataForHoverCard: 0,
       isCalloutVisible: false,
       refSelected: null,
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       xCalloutValue: '',
       yCalloutValue: '',
       YValueHover: [],
diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
index 33f52b77f6a13a..4aa3d4e2a2377d 100644
--- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
+++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -133,7 +133,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       ): DataSet => this._createNewDataSet(data, xDate, xNum, yDate, yNum),
     );
     this.state = {
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       activeLegend: '',
       isCalloutVisible: false,
       target: null,
diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
index 8e5562ebe55bbf..10246111177c29 100644
--- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
+++ b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
@@ -87,7 +87,7 @@ export class HorizontalBarChartWithAxisBase extends React.Component<
       isLegendSelected: false,
       isLegendHovered: false,
       refSelected: null,
-      selectedLegendTitle: '',
+      selectedLegendTitle: props.legendProps?.selectedLegend ?? '',
       xCalloutValue: '',
       yCalloutValue: '',
       activeXdataPoint: null,
diff --git a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx
index 846ce2c3764ac6..0e55be45edac90 100644
--- a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -186,7 +186,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       activeLegend: '',
       YValueHover: [],
       refSelected: '',
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       isCalloutVisible: false,
       selectedLegendPoints: [],
       selectedColorBarLegend: [],
@@ -1192,7 +1192,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           () => `translate(${this._xAxisScale(pointToHighlight.x)}, ${this._yAxisScale(pointToHighlight.y)})`,
         )
         .attr('visibility', 'visibility')
-        .attr('y2', `${lineHeight - 5 - this._yAxisScale(pointToHighlight.y)}`);
+        .attr('y2', `${lineHeight - this._yAxisScale(pointToHighlight.y)}`);
 
       this.setState({
         nearestCircleToHighlight: pointToHighlight,
@@ -1278,7 +1278,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       d3Select(`#${this._verticalLine}`)
         .attr('transform', () => `translate(${_this._xAxisScale(x)}, ${_this._yAxisScale(y)})`)
         .attr('visibility', 'visibility')
-        .attr('y2', `${lineHeight - 5 - _this._yAxisScale(y)}`);
+        .attr('y2', `${lineHeight - _this._yAxisScale(y)}`);
       if (this._uniqueCallOutID !== circleId) {
         this._uniqueCallOutID = circleId;
         this.setState({
diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
index 8a0c7585df3416..9e793a25b87c60 100644
--- a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
+++ b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -110,7 +110,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       dataForHoverCard: 0,
       isCalloutVisible: false,
       refSelected: null,
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       activeLegend: '',
       xCalloutValue: '',
       yCalloutValue: '',
diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
index dddf57a74ccb23..7e1dc04719647d 100644
--- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
+++ b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -128,7 +128,7 @@ export class VerticalStackedBarChartBase extends React.Component<
     super(props);
     this.state = {
       isCalloutVisible: false,
-      selectedLegend: '',
+      selectedLegend: props.legendProps?.selectedLegend ?? '',
       activeLegend: '',
       refSelected: null,
       dataForHoverCard: 0,